有没有一种方法可以映射反应中的一组对象并从 cloudinary 获取相关图像

Question

我试图在 React 中映射一组对象，该对象包含产品名称和 ID。我正在使用 cloudinary 来存储我的图像，但我不确定要将什么作为 publicId

我正在尝试获取与每个对象关联的 public id 以传递到 public id

这是我的代码

 <div>
      <Container>
        <h2>My Products</h2>
        <CardDeck>
          {myProducts.map((product) => (

            <Card style={{ minWidth: "14rem" }}>
              <Image cloudName='dgeizgzdw' publicId="equipped/{product._id}" className='card-img-top'/>
              
              <Card.Body>
                <Card.Title>{product.product}</Card.Title>
                <Button variant="primary">Go somewhere</Button>
              </Card.Body>
            </Card>
          ))}
        </CardDeck>
      </Container>
    </div>

当我像这样对产品 ID 进行硬编码时它会起作用。

  <div>
      <Container>
        <h2>My Products</h2>
        <CardDeck>
          {myProducts.map((product) => (

            <Card style={{ minWidth: "14rem" }}>
              <Image cloudName='dgeizgzdw' publicId={'equipped/5f1fcbd42371c61758db2962'} className='card-img-top'/>
              
              <Card.Body>
                <Card.Title>{product.product}</Card.Title>
                <Button variant="primary">Go somewhere</Button>
              </Card.Body>
            </Card>
          ))}
        </CardDeck>
      </Container>
    </div>
  );

我试过插入 public id 主要问题是字符串 'equipped/ 的第一部分没有保存在 public id

Answer 1

而不是：

<Image cloudName='dgeizgzdw' publicId="equipped/{product._id}" className='card-img-top'/>

写入：

<Image cloudName='dgeizgzdw' publicId={`equipped/${product._id}`} className='card-img-top'/>

有没有一种方法可以映射反应中的一组对象并从 cloudinary 获取相关图像

Is there a way to map over an array of objects in react and also get the accosiated images from cloudinary

javascript

jsx

cloudinary

reactjs