在 reactjs 中显示本地图像不起作用答案

【问题标题】：Display a local image in reactjs doesn't work在 reactjs 中显示本地图像不起作用
【发布时间】：2020-12-15 07:41:29
【问题描述】：

任务很简单：根据动态数据在 reactjs 应用中显示本地图片。

这是我尝试过的（假设path_to_image 是动态派生的）：

<img src={require(path_to_image} />

产生错误：

Error: Cannot find module '../../images/logos/somelogo.jpg'

没有要求：

<img src={path_to_image} />

生成损坏的图像。

这两种方法似乎是人们正在做的，但这里没有运气。我该如何解决？

【问题讨论】：

你确定路径正确吗？
是的，我查过了。

标签： reactjs

【解决方案1】：

import image from "./path/to/image.png"

如果您计划以动态方式使用更多图像，也许您应该将它们的路径存储在 db 中，然后在 db 中查询相应的路径。实际上，这就是例如使用 CMS 的方式。即使您将文件存储在同一主机上，您仍然会将它们的路径保存到数据库而不是硬编码。

【讨论】：

【解决方案2】：

使用这个：

import SomeLogo from '../../images/logos/somelogo.jpg';

然后你可以像这样使用它：

<img src={SomeLogo} />

对于多张图片，你可以将它们存储在一个 JSON 数组中，然后遍历它们并添加每张图片。

【讨论】：

有100+张图片可以动态生成。全部导入似乎很疯狂，不是吗？
@Eddy 确实如此。也许使用循环？
导入循环？我的意思是，必须有更好的方法，我不是第一个在 reactjs 中使用动态图像的人，是吗？
@Eddy 我刚刚找到this question。也许它可以帮助？

【解决方案3】：

这样做：

let imageSrc = require("../../images/logos/generic.jpeg");
let dynamiclyGeneratedSrc = ...;
if (dynamiclyGeneratedSrc !== undefined) {
    imageSrc = require(`../../images/logos/${dynamiclyGeneratedSrc}`);
}

【讨论】：