渲染 ReactJS - './images/0.jpg' 有效.. 但 property.image 没有？答案

【问题标题】：Render ReactJS - './images/0.jpg' works.. but property.image doesn't?渲染 ReactJS - './images/0.jpg' 有效.. 但 property.image 没有？
【发布时间】：2019-03-21 23:06:36
【问题描述】：

在渲染中（从函数返回），我有：

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

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

【问题讨论】：

你有两个问题:) 所以一次只有一个问题。这样更容易。（但要回答额外的问题，你不能在渲染的 JSX 部分内声明变量，但你可以在 JSX 之外声明它们）

标签： reactjs

【解决方案1】：

我假设您正在使用 web pack 或类似的东西（例如，创建反应应用程序或包裹）。这（通常）是 require 函数的来源，也是您可以“要求”图像的原因。但您唯一需要的图像是本地图像（项目源中的图像），而不是网络上的图像。

如果你想从网络上获取图片，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 />

【讨论】：