如何在vite+react app中通过props动态从src文件夹获取图片

Question

export default function Card(props) {
    return (
        <card>
            <img className={cardCss.card__img} src={`../assets/imgs/card/${props.img}`} alt="" />
            <div className={cardCss.card__stats}>
                <img className={cardCss.star} src={star} alt="" />
                <span className={cardCss.rating}>5.0
                </span>
                <span className={cardCss.gray}>(6) • </span>
                <span className={cardCss.gray}>USA</span>
            </div>
            <p className={cardCss.card__title}>
                Life lessons with Katie Zaferes
            </p>
            <p className={cardCss.card__pricing}>
            <span className={cardCss.bold}>From $136</span> / person
            </p>
        </card>
    );
}

我写到这里

 src={

../assets/imgs/card/${props.img}

}

在 img 标签中。和

export default function App() {

  return (
    <div>
      <Nav />
      <Main />
      <Card 
          img = "img1.svg"
      />
    </div>
  );
}

这就是我将 img 属性赋予 Card 组件的方式。路径是正确的。 但它不显示图像。控制台中显示

img1.svg:1     GET http://localhost:5173/assets/imgs/card/img1.svg 404 (Not Found)

请有人告诉我如何解决这个问题。

我尝试在 src 标签中写入整个路径，例如

src="../assets/imgs/card/img1.svg".

但这也行不通。它再次在控制台中显示相同的错误。

路径是正确的，因为我使用相同的路径导入图像

从“../assets/imgs/card/img1.svg”导入img1；

并在图像标签中

src = {img1};

但我想要

src={

../assets/imgs/card/${props.img}

} 

这可以工作，这样我就可以使用 props 动态导入图像

Answer 1

第一步检查相对路径是否正确。检查路径是否正确从文件所在的位置开始。

您也可以尝试使用以下代码

<img className={cardCss.card__img} src={"../assets/imgs/card/"+props.img} alt="" />

还要检查扩展名是否正确。

Answer 2

去掉开头的冒号，它应该以/开头

<img className={cardCss.card__img} src={`/assets/imgs/card/${props.img}`} alt="" />