渲染图像-‘./ ReactJS /0.jpg’起作用..但是property.image不知道？
渲染图像-‘./ ReactJS /0.jpg’起作用..但是property.image不知道？
提问于 2019-03-22 07:06:37
在渲染(从函数返回)中，我有：
{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 />我得到了：
图像错误:找不到模块‘./
/0.jpg’，
这对我来说没什么意义。
另外，我不确定如何在render中分配变量，我试过了：
{ var abc = property.image }但是get：
。/src/app.js语法错误:意外的标记(220:12)
如果有人能帮我理解原因，我将不胜感激。
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-03-22 07:42:59
我假设您正在使用web pack或类似的东西(例如，创建react应用程序或包裹)。这(通常)是require函数的来源，也是为什么您可以“请求”一个图像的原因。但您可以要求的唯一图像是本地图像(项目源代码中的图像)，而不是web上的图像。
如果你想从网络上获取图片，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 />页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55290539
复制相关文章
相似问题
腾讯云开发者
