React+Tailwind CSS中直接引用图片路径失效问题求助

在React项目（搭配Webpack/Vite这类构建工具）中，直接写src="assets/profile-image.png"无法显示图片，核心原因是构建工具的资源打包机制：

• 当你直接使用字符串路径时，浏览器会将其解析为相对当前HTML文件的路径，但构建工具在打包时会对src目录下的资源进行处理——不仅会将图片移动到打包后的特定目录（比如dist/assets或static/media），还可能给文件名添加哈希值（用于缓存优化），导致原路径和实际打包后的文件位置不匹配，最终显示损坏链接。

• 而使用ES模块导入（import pic from './assets/profile-image.png'）时，构建工具会自动识别这是一个资源文件：

  1. 将图片纳入打包流程，处理后生成正确的最终访问路径
  2. 把这个路径赋值给变量pic，你通过src={pic}使用的就是打包后的真实路径，因此能正常加载图片

可选的直接路径写法 #

如果想直接写路径生效，可将图片放在项目的public目录下（Create React App/Vite都支持），然后使用根相对路径：

// 图片位置：public/assets/profile-image.png
<img alt="profile" src="/assets/profile-image.png" />

public目录下的资源不会被构建工具修改路径，会原封不动复制到打包后的根目录，因此根相对路径能正确指向文件位置

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