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

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (27)

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

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

扫码关注云+社区

领取腾讯云代金券