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

问题描述

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

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

<img src={require(path_to_image} />

产生错误：

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

没有要求：

<img src={path_to_image} />

生成损坏的图像。

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

解决方法

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

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

使用此：

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

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

<img src={SomeLogo} />

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

做到这一点：

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

reactjs reactjs