将参数作为数组属性发送时，React Ionic Image无法正常工作

如何解决将参数作为数组属性发送时，React Ionic Image无法正常工作

我正在尝试使用一张幻灯片，该幻灯片显示我的应用程序中的产品属性。

products变量具有ID，NAME，DESCRIPTION，PRICE和IMAGE。

const products = [{
  id: 1,name: "Sapato1",description: "confort line with adaptative design",price: "999,99",img: "../img/hamburger1.jpg"
},{
  id: 2,name: "Product X",description: "Different sizes and shapes",img: "../img/hamburger2.jpg"
},{
  id: 3,name: "Product Y",description: "Manny different features",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>
        )}

解决方法

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