在渲染中(从函数返回),我有:
{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)
如果有人能帮我理解原因,我会非常感激。
我假设您正在使用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 />