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

【问题标题】：Images not loading when relative path is used in React在 React 中使用相对路径时图像未加载
【发布时间】：2023-01-09 02:39:59
【问题描述】：

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

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

然后像这样使用它们：

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

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

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

但它不工作，即使它应该。

【问题讨论】：

标签： javascript html css reactjs

【解决方案1】：

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

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

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

第二个是给<img>的src属性一个图像的路径，但它总是相对于public文件夹，路径应该以/开头，/意味着@ 987654332@文件夹。

请参阅 Create React App 文档中的 Adding Images, Fonts, and Files 和 Using the Public Folder。

对于第二次尝试，您可以将 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="" />

【讨论】：