需要 src 图像的路径作为变量

Question

我正在处理一个使用 create-react-app 创建的 react 项目。

我有一个数据对象数组。对象中的一个属性是图像路径。如果我将路径直接放在 src 标签中并使用 require，它可以工作。

<img src={require(`./../../../assets/images/1425629.svg`)} />

如果我使用变量，我需要做什么，因为路径来自对象，我收到以下错误：

<img src={require(`${data.image}`)} />

Error: Cannot find module './../../../assets/images/1425629.svg'

[更多代码编辑]

这是我对象的基础(在这里不那么复杂(

const data = [
{
image: `./../../../assets/icons/1458.svg`,
title: 'title1',
description: 'description1'
},
{
image: `./../../../assets/icons/48754.svg`,
title: 'title2',
description: 'description2'
},
{
image: `./../../../assets/icons/7548.svg`,
title: 'title3',
description: 'description3'
}
];

此容器组件将正确的数据传递给功能组件

const BlogInfo = ({ id }) => <Info {...data[id]} />;

这是功能组件的基础

const Info = ({ image, title, description }) => {
return (
<div>
<img src={require(`${image}`)} />
<h1>{title}</h1>
<p>{description}</p>
</div>
);
};

所以在功能组件中，以下内容正在工作

<img src={require(`./../../../assets/images/1425629.svg`)} />

和

import icon from './../../../assets/images/1425629.svg';
<img src={icon} />

但我想实现这一点的方式(动态(不是

<img src={require(`${image}`)} />

Answer 1

该错误是因为当托管 react 应用程序时，图像路径将更改为相对于主机路径的动态值。这是由于通过网络包捆绑。所以反应使用来自webpack的require.context。

导出 JSON 并获取所有必需的路径。然后执行以下操作

var cache = [];
function importAll (r) {
r.keys().forEach((key,index) => cache[index] = r(key));
}    
//path from json
importAll(require.context(path, false, /.(png|jpe?g|svg)$/));
export default cache;

缓存将是您需要的所有图像的数组

在您的 img 标签中执行以下操作

<img src={cache[0]}/>

如果您已经知道路径，则可以将其导入为

import img from imgPath
...
<img src = {img}/ >

希望这有帮助