使用 JSX 在 React 中显示图像，无需导入答案

【问题标题】：Display images in React using JSX without import使用 JSX 在 React 中显示图像，无需导入
【发布时间】：2017-07-23 15:17:51
【问题描述】：

我遇到的问题是img 标签。当涉及到单个图像时，下面的代码加载图像：

import image1 from './images/image1.jpg';
<img src={image1} />

但以下代码无法加载：

 <img src={'./images/image1.jpg'}/>
            or
  <img src='./images/image1.jpg'/>

我需要遍历json，比如：

[{'img':'./images/image1.jpg','name':'AAA'}, {'img':'./images/image2.jpg','name':'BBB'}]

另外，将它们中的每一个都显示为图像，名称为页脚。循环很好，但图像不加载。我实际上不可能导入每个要添加的图像。到目前为止，我不使用 JSX 以外的任何东西。请支持。

【问题讨论】：

在您的浏览器网络选项卡中，它认为图像的 URL 是什么？

标签： javascript reactjs jsx

【解决方案1】：

你需要这样的文件：

<img src={ require('./images/image1.jpg') } />

【讨论】：

eslint 抱怨说“意外的 require()。(global-require)”还说“对 require() 的调用应该使用字符串文字 (import/no-dynamic-require)”跨度>
@pixelwiz 如果您启用了该设置，请将 ' 替换为反引号 `。
我实际上必须创建一个单独的文件来导入所有图像，然后我可以导入该文件并引用图像。感觉有点疯狂，但现在 React、Webpack 和 ESLint 似乎很开心。

【解决方案2】：

require 用于静态“导入”，因此您只需更改您的imports。

例子：

var imageName = require('./images/image1.jpg')
<img src={imageName} />

【讨论】：

不客气 :) 你可以接受我的回答来解决你的问题，所以它有助于 stackoverflow 社区
我一直在尝试。但我收到了一个通知，我现在可以在 4 分钟后接受。
你是对的！它真的有“等待时间”..哈哈

【解决方案3】：

我们可以使用 require 代替 import 语句。喜欢，

<img src={require("folder/image.format")} alt="image not found" />

但是如果你运行它，它会显示image not found!!!

我们可以通过添加 .default

来更改语句来简单地解决它

let image = require("folder/image.format");

<img src={image.default} alt="image not found" />

【讨论】：

有趣。在提出这个问题 3 年后，我发现这个具体的评论很有帮助。出于某种原因，我需要那个default。
也帮助了我，原来的答案确实编译了，但它没有显示请求的图像。谢谢

【解决方案4】：

我刚试过，它有效！

import I01d from '../../styles/images/01d.png';
....
<img src={this.getWeatherIconImage(iconCode)}/>

getWeatherIconImage(icon) {
  switch (icon) {
    case '01d': return I01d; ...
    default: break;
  }
}

【讨论】：

【解决方案5】：

建议的答案似乎不再起作用。这是一个突出问题的代码片段。

import React from 'react';
import importImg from '../images/img.jpg';
export default function ImgTest(){
return(<>
<img src={importImg} alt='import'></img><br/>
<img src={require('../images/img.jpg')} alt='require function fails'></img><br/>
</>)
}

渲染这段代码时，会发生以下情况。

第一次显示图像 - 它是预期的结果

第二次显示 alt "require function failed" - 不是预期的结果

【讨论】：

【解决方案6】：

这是因为，您已将 images 文件夹放在 src 文件夹中。所以你应该导入或要求它。图片的来源如果放在 public 文件夹中，可以直接放图片的来源，不用导入或使用 require，像这样。

【讨论】：