Question

我正在构建一个网格，其中包含具有ul li结构的项目。我使用JSON提取的数据作为Class的道具，除图像外，其他所有内容均被提取。问题是我无法从JSON文件动态将我的图像提取到项目列表中。 img文件位于JSON文件夹的子文件夹中。所以这条路对我没有任何帮助。每个项目都有不同的图像。

[
{
"path": "./imgs/doglogo.svg"
"name": "dog"
},
{
"path": "./imgs/catlogo.svg"
"name": "cat"
}
]

我认为我需要某种必需的根路径参数，但不知道如何执行此操作？

return (
    <li className={'grid-item'}>
        <a href={href} className={gridItemLink} key={name}>
            <div className={'grid-image'}>
                <img src={path} img alt="" />
            </div>
        </a>
    </li>
);

Answer 1

不幸的是，您必须导入图像才能使用它们。

如果您已使用 create-react-app 创建您的项目，则可以将图像放在public文件夹中（更多信息，请参见Correct path for img on React.js）：

<img src={path} />

如果您使用的是 webpack ，另一种选择是要求图像路径带有模板文字（有关更多信息，请参见Load images based on dynamic path in ReactJs）

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

使用JSON导入的图像作为道具

1 个答案: