将 Cloudinary React 组件与 Bootstrap React for Images 结合使用

Question

我在 Bootstrap 卡片中将图像显示为 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 值

Answer 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 的网站上。

将 Cloudinary React 组件与 Bootstrap React for Images 结合使用

Using Cloudinary React Component with Bootrap React for Images

reactjs

react-bootstrap

cloudinary