VS Code中React应用及普通HTML图片路径引用失效问题解决

React组件中图片的正确引用方式 #

你的项目结构是my-app/src（组件代码）、my-app/public/assets（图片资源），React对public目录的静态资源有特定路径规则：

• public目录是应用的静态资源根目录，开发或构建后，该目录下的资源会直接映射到应用的根路径（比如http://localhost:3000/）。
• 不能使用本地文件系统的绝对路径（如my-app\public\assets\cat.png），因为React运行时会基于服务路径解析资源，而非本地文件路径。

推荐两种正确写法：

1. 根路径引用（最简便）
   直接从应用根目录指向assets下的图片，不管组件在src的哪个子目录都能生效：

<img src="/assets/cat.png" alt="A cute cat" width="300" height="200"/>

2. 模块导入方式
   将图片作为模块导入组件，适合需要webpack处理图片的场景（比如优化、hash命名），注意调整import的相对路径（根据组件所在位置）：

// 假设组件在src/Components/MyComponent.js
import catImage from '../../public/assets/cat.png';

<img src={catImage} alt="A cute cat" width="300" height="200"/>

普通HTML文件的路径处理 #

在VS Code中无法使用全路径是因为浏览器运行HTML时，会基于当前页面的服务路径解析资源，而非本地文件系统路径：

• 如果HTML文件在public目录下（比如public/index.html），直接用相对路径或根路径：

  <img src="assets/cat.png" alt="A cute cat" width="300" height="200"/>
  <!-- 或根路径写法 -->
  <img src="/assets/cat.png" alt="A cute cat" width="300" height="200"/>
  

• 如果HTML文件在src目录下，需要用相对路径指向public目录：

  <img src="../public/assets/cat.png" alt="A cute cat" width="300" height="200"/>
  

内容的提问来源于stack exchange，提问作者Sawani Doshi