将参数作为数组属性发送时，React Ionic Image 不起作用答案

【问题标题】：React Ionic Image is not working when sending parameter as array attribute将参数作为数组属性发送时，React Ionic Image 不起作用
【发布时间】：2023-03-10 20:46:01
【问题描述】：

我正在尝试在我的应用中使用显示产品属性的幻灯片。

products 变量有 ID、NAME、DESCRIPTION、PRICE 和 IMAGE。

const products = [{
  id: 1,
  name: "Sapato1",
  description: "comfort line with adaptive design",
  price: "999,99",
  img: "../img/hamburger1.jpg"
}, {
  id: 2,
  name: "Product X",
  description: "Different sizes and shapes",
  price: "999,99",
  img: "../img/hamburger2.jpg"
}, {
  id: 3,
  name: "Product Y",
  description: "Many different features",
  price: "999,99",
  img: "../img/hamburger3.jpg"
}]

使用带有导入的 HTML img 标签可以正常工作，但我希望将与我展示的产品相关的图像作为变量。

import Image from '../img/hamburger1.jpg';

<img src={Image} alt="produt1" />

但我想使用 src={product.img} 而不是 src={Image} 但它不起作用。

这是我正在使用的代码

{products.map((product) =>
          <IonSlide>
            <IonCard button={true}>
              <IonCardHeader>
                <IonCardTitle>{product.name}</IonCardTitle>
                <IonCardSubtitle>Card Subtitle</IonCardSubtitle>
              </IonCardHeader>

              <IonCardContent>
                <img src={Image} alt="produt1" />
                {product.description}
              </IonCardContent>
              <IonButton expand="full" href="#" color="primary"><IonIcon slot="start" icon={cart} />R$ {product.price}</IonButton>
            </IonCard>
          </IonSlide>
        )}

【问题讨论】：

标签： reactjs image ionic-framework

【解决方案1】：

您应该将您的img 文件夹与所有图片一起放入public 文件夹中。然后您可以更改对图像的引用，例如img: "/img/hamburger1.jpg"。那应该行得通。这是一个工作示例 - https://codesandbox.io/s/hungry-golick-funtz?file=/src/App.js

【讨论】：