将 Cloudinary React 组件与 Bootstrap React 一起用于图像答案

【问题标题】：Using Cloudinary React Component with Bootrap React for Images将 Cloudinary React 组件与 Bootstrap React 一起用于图像
【发布时间】：2020-12-29 03:45:44
【问题描述】：

我在 Bootstrap Cards 中将图像显示为 React 组件，如下所示：

         <Card
            style={{ width: "18rem" }}
            key={index}
            className="box"
            border="danger"
          >
            <Card.Header>
              {card.brand} - {card.series}
            </Card.Header>
            <Card.Img
              variant="top"
              src={card.image}    
              fluid
            />
            <Card.Body>
              <Card.Title>
                {card.player} (#
                {card.card_number.$numberDouble}) {card.variation}
              </Card.Title>
            </Card.Body>
            <ListGroup className="list-group-flush">
              <ListGroupItem>
                Print Run - {card.print_run.$numberDouble}
              </ListGroupItem>
              <ListGroupItem>Career Stage - {card.career_stage} </ListGroupItem>
              <ListGroupItem>For Trade - {card.forTrade}</ListGroupItem>
            </ListGroup>
            <Card.Footer className="text-muted ">{card.team}</Card.Footer>
          </Card>

独立于此，我可以通过其 React 组件渲染 Cloudinary 图像，例如：

<CloudinaryContext cloudName="dkwmxhsem">
          <Image publicId="Was-Ter-266front_w0lcdz">
            <Transformation width="200" crop="scale" angle="10" />
          </Image>
</CloudinaryContext>

但可以将转换后的 cloudfoundry 图像渲染为 <Card.Img /> 中的 img src 值

【问题讨论】：

标签： reactjs react-bootstrap cloudinary

【解决方案1】：

如果您希望生成 Cloudinary URL 而不将其放在图像标签中，则必须使用构建 React SDK 的 Cloudinary 核心 Javascript 功能。为此，您可以执行以下操作：

import {Cloudinary} from 'cloudinary-core';
const cloudinaryCore = new cloudinary.Cloudinary({cloud_name: 'demo'});
const SampleImg = () => (
    <img src={cloudinaryCore.url('sample')} />
);

更多信息here Cloudinary 的网站。

【讨论】：