我如何根据 ReactJS 中的道具从我的资产文件夹中动态加载图像？
How can I dynamically load an image from my assets folder based on props in ReactJS?
我正在构建一个简单的网络应用程序，为数据库中的每个项目显示一个信息面板。此信息的一部分是一张图片，我想在旁边显示。
面板组件中的这段代码过去工作正常：
<td>
<img src={require(`../../../assets/images/${props.image_name}.png`)} />
</td>
但是，我最近更新了我的模块，图像现在损坏了。有推荐的新方法吗？
让文件名 = "flower.png";
重新调整
![]()
/images/${filename}} />
最好的方法应该是：
首先：在图像文件夹中制作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])} />
我正在构建一个简单的网络应用程序，为数据库中的每个项目显示一个信息面板。此信息的一部分是一张图片，我想在旁边显示。
面板组件中的这段代码过去工作正常：
<td>
<img src={require(`../../../assets/images/${props.image_name}.png`)} />
</td>
但是，我最近更新了我的模块，图像现在损坏了。有推荐的新方法吗？
让文件名 = "flower.png";
重新调整
/images/${filename}} />
最好的方法应该是：
首先：在图像文件夹中制作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])} />