Question

在渲染器（从函数返回）中，我有：

{console.log(property.image)}
{console.log(typeof property.image)}
<Image src={require('./images/0.jpg')} fluid rounded />

正确渲染图像并在控制台上记录“ ./images/0.jpg”字符串

但是当我尝试：

{console.log(property.image)}
{console.log(typeof property.image)}
<Image src={require(property.image)} fluid rounded />

我得到：

错误：找不到模块“ ./images/0.jpg”，

这对我来说没有意义...

此外，我不确定如何在渲染中分配变量，我尝试过：

{ var abc = property.image }

但得到：

./ src / App.js语法错误：意外令牌（220：12）

如果有人可以帮助我理解原因，我将不胜感激。

Answer 1

我假设您正在使用Web Pack或类似工具（例如，创建react app或包裹）。（通常）这就是require函数的来源，以及为什么您可以“需要”一张图像。但是，您唯一需要的图像是本地图像（项目源中的图像），而不是网络上的图像。

如果要从网络上获取图像，则require不是您想要的。在这种情况下，您只需将URL作为字符串传递给src属性。

但是，如果确实需要项目源文件中的图像，则可能需要使用require。在大多数情况下，您在文件顶部使用require，然后将字符串而不是变量传递给它。这是因为打包程序在打包之前会先读取文件，然后查找任何需要的内容，以便可以将它们包含在包中。但是，当您传递要求变量时，它就无法做到这一点。但是，如果要从目录动态加载文件，则可以使用require.context。

因此，您可能希望将此文件放在文件顶部：

const pathToImages require.context('./images', true);

以及您的渲染中

<Image src={pathToImages('0.jpg')} fluid rounded />

或

<Image src={pathToImages(property.image)} fluid rounded />

渲染ReactJS-'./images/0.jpg'可以工作..但是property.image不可以吗？

1 个答案: