<img src ='img.png'>未显示本地文件（反应）

Question

我在javascript中有一个img标签，但未显示该文件（本地文件）。 该文件位于名为images的文件夹中，而我尝试使用该图像的js文件位于名为Pages的文件夹中。这两个文件夹都在同一目录中。

<img src='../images/img.png' alt='template'/>

这是im使用标签的方式，浏览器在无效图片上显示带有图标的替代名称

Answer 1

您需要将图像导入到react组件中，如下所示。

import image from '../images/img.png';

并在img标签中使用，如下所示

<img src={image} />

它将起作用。

Answer 2

当图像位于应用程序的public文件夹中时，您可以使用相对路径，最好通过图像将图像通过webpack传递，这样您只需要将图像导入为普通对象并使用即可到您的组件中。

import template from '../images/image.jpg/

// later ir your code 

<img src={template} alt="image al" />

Answer 3

如果这是一个React项目，则需要像这样在src中要求图像：

src={ require('../images/img.png') }