时间戳

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

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

问题描述

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

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

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

但是，我最近更新了我的模块，图像现在损坏了。有没有推荐的新方法来做到这一点？

标签： reactjsimagerequirereact-props

解决方案

最好的方法应该是这样：

首先：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])} />

推荐阅读