使用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'}]并将每个显示为图片，名称为footer。循环很好，但图像无法加载。实际上我自己无法导入要添加的每个图像。我现在不使用除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代替导入语句。 喜欢，

<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，像这样