在 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>的src属性，但它总是相对于public ，路径应该以/开头，而/表示public 。

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

对于您的第二次尝试，您可以将images文件夹放在public中，并像这样获取图像：

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

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

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