在不导入的情况下使用 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"，所以你只需要改变你的imports。

示例：

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

Answer 3

我刚刚试过了，有效！

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

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

Answer 4

建议的答案似乎不再有效。这是突出显示问题的代码片段。

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 fails”- 不是预期的结果

Answer 5

我们可以使用 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 6

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

在不导入的情况下使用 JSX 在 React 中显示图像

Display images in React using JSX without import

javascript

jsx

reactjs