在 React 中使用相对路径时图像未加载

Question

我之前在 React 中像这样导入图像：

import person from '../images/image1.png'

然后像这样使用它们：

<img src={person} alt="" />

src现在由于某种原因我想指定路径本身，如下所示：

<img src="../images/image1.png" alt="" />

但它不起作用，即使它应该起作用。

Answer 1

使用 Create React App 在 JSX 中添加图像有两种方法。第一个是像您一样使用import，导入src文件夹中某处的图像，如下所示：

import person from '../images/image1.png'

<img src={person} alt="" />

第二个是将图像的路径赋予<img>'ssrc属性，但它始终相对于public文件夹，路径应以 开头/，/表示public文件夹。

请参阅Create React App 文档中的添加图像、字体和文件以及使用公共文件夹。

对于第二次尝试，您可以将该images文件夹放入该public文件夹中，并获取图像，如下所示：

<img src="/images/image1.png" alt="" />

如果您的 React 应用程序在部署时位于子文件夹中，则对于第二种工作方式，您应该添加package.jsonthis "homepage":"www.example.com/folder"，并按process.env.PUBLIC_URL如下所示使用。

 <img src={process.env.PUBLIC_URL + "/images/image1.png"} alt="" />