VS Code中图片标签路径规则及正确引用路径咨询

项目结构说明 #

你的项目目录结构大致为：

项目根目录/
├─ public/
│  └─ pictures/
│     └─ [你的图片文件]
└─ src/
   └─ about.js

两种正确引用方式 #

1. 直接作为静态资源引用（推荐用于public下的图片）

public文件夹是项目的静态资源根目录，构建后其内容会被直接放到服务器的根目录下，所以直接用绝对路径引用即可，不用考虑about.js的位置：

// 在about.js的JSX/Vue模板中
<img src="/pictures/你的图片文件名.png" alt="图片描述" />

2. 模块导入方式（适合需要打包工具处理的场景）

如果需要通过import引入图片（比如要让webpack等工具处理图片压缩、哈希命名），建议把图片移到src目录下（比如src/assets/pictures），然后用相对路径导入：

// 在about.js中导入
import myImage from '../assets/pictures/你的图片文件名.png';

// 使用时
<img src={myImage} alt="图片描述" />

路径规则解析 #

• public静态资源规则：public内的文件不会被打包工具编译，构建后直接位于部署目录的根路径，因此必须用/开头的绝对路径引用，相对路径会因为打包后src代码的位置变化而失效。
• src内部模块规则：src下的文件属于打包模块，引用时使用相对路径：
  • ./ 表示当前文件所在的目录
  • ../ 表示当前目录的上一级目录，以此类推逐级向上查找目标文件

为什么你之前的写法无效？ #

你尝试的../public/pictures/...是相对路径，在开发环境中VS Code的本地服务可能能解析，但项目构建后，src的代码会被打包到子目录（比如dist/js），此时相对路径会指向dist/js/../public，而实际public的内容在dist/根目录，自然找不到文件。

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