渲染ReactJS - './images/0.jpg'有效..但是property.image没有?

问题描述 投票:0回答:1

在渲染中(从函数返回),我有:

{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)

如果有人能帮我理解原因,我会非常感激。

reactjs
1个回答
1
投票

我假设您正在使用Web包或类似的东西(例如,创建反应应用程序或包裹)。那是(通常)需求函数的来源,以及为什么你可以“需要”图像。但您可以要求的唯一图像是本地图像(项目源中的图像),而不是Web上的图像。

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

但是,如果您确实需要项目源中的图像,那么您可能会使用require。大多数情况下,您在文件顶部使用require,并将其传递给字符串,而不是变量。这是因为您的打包程序在打包之前读取文件,并查找任何需求,以便它可以将它们包含在包中。但是当你传递require变量时,它不能那样做。但是,如果要从目录动态加载文件,可以使用require.context

所以你可能想要在你文件的顶部:

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

在你的渲染中:

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

要么

<Image src={pathToImages(property.image)} fluid rounded />
© www.soinside.com 2019 - 2024. All rights reserved.