Question

我正在研究使用create-react-app创建的反应项目。

我有一组数据对象。对象中的一个属性是图像路径。如果我将路径直接放在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的捆绑。因此，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}/ >

希望这有帮助

要求src图像的路径为变量

1 个答案: