如何根据 ReactJS 中的道具从我的资产文件夹动态加载图像？

如何解决如何根据 ReactJS 中的道具从我的资产文件夹动态加载图像？

我正在构建一个简单的网络应用程序，显示数据库中每个项目的信息面板。此信息的一部分是我想与它一起显示的图片。

面板组件中的这段代码以前可以正常工作：

<td>
  <img src={require(`../../../assets/images/${props.image_name}.png`)} />
</td>

但是，我最近更新了我的模块，现在图像已损坏。是否有新的推荐方法来执行此操作？

解决方法

最好的方法应该是：

首先：在图片文件夹内制作index.js，然后导入所有图片

import img1 from "./image_name.jpg";
export const image_name = img1;

或

export const image_name = require("./image_name.jpg")

第二：像这样导入它们：

import * as images from "../assets/img";

最后：像模块一样使用它们

 images.image_name 

或

<img src={images[props.image_name])} />

,

let filename = "flower.png"; 返回 /images/${filename}} />