首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >渲染图像-‘./ ReactJS /0.jpg’起作用..但是property.image不知道?

渲染图像-‘./ ReactJS /0.jpg’起作用..但是property.image不知道?
EN

Stack Overflow用户
提问于 2019-03-22 07:06:37
回答 1查看 26关注 0票数 0

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

代码语言:javascript
复制
{console.log(property.image)}
{console.log(typeof property.image)}
<Image src={require('./images/0.jpg')} fluid rounded />

它正确地呈现了图像,并且控制台记录了"./images/0.jpg“字符串

但当我尝试时:

代码语言:javascript
复制
{console.log(property.image)}
{console.log(typeof property.image)}
<Image src={require(property.image)} fluid rounded />

我得到了:

图像错误:找不到模块‘./

/0.jpg’,

这对我来说没什么意义。

另外,我不确定如何在render中分配变量,我试过了:

代码语言:javascript
复制
{ var abc = property.image }

但是get:

。/src/app.js语法错误:意外的标记(220:12)

如果有人能帮我理解原因,我将不胜感激。

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-03-22 07:42:59

我假设您正在使用web pack或类似的东西(例如,创建react应用程序或包裹)。这(通常)是require函数的来源,也是为什么您可以“请求”一个图像的原因。但您可以要求的唯一图像是本地图像(项目源代码中的图像),而不是web上的图像。

如果你想从网络上获取图片,require不是你想要的。在这种情况下,只需将url作为字符串传递给src属性即可。

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

因此,您可能希望将以下内容放在文件的顶部:

代码语言:javascript
复制
const pathToImages require.context('./images', true);

在你的渲染中:

代码语言:javascript
复制
<Image src={pathToImages('0.jpg')} fluid rounded />

代码语言:javascript
复制
<Image src={pathToImages(property.image)} fluid rounded />
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/55290539

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档