使用 JSX 在 React 中显示图像而无需导入

Question

我面临的问题是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 以外的任何东西。 请赐教。

Answer 1

您需要像这样要求文件：

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

Answer 2

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

例子：

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

Answer 3

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

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

但是如果你运行它，它会显示找不到图像！！！

我们可以通过添加.default更改语句来简单地解决它

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

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

Answer 4

我刚试过这个，它有效！

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

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

Answer 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“要求功能失败” - 不是预期的结果

Answer 6

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

<img src='/images/image1.jpg' />