Create React App中本地图片引用两种方式差异原因咨询

• Webpack打包资源的处理逻辑：当你用import img_name from "../src/assets/images/img_name.jpg"引入图片时，Create React App内置的Webpack会把这张图片当作静态资源处理——它会将图片复制到打包后的build文件夹，还会给文件名添加哈希值（比如变成img_name.7a3b2c.jpg），同时import语句会返回这张图片在打包后的绝对访问路径，浏览器能直接通过这个路径找到资源。

• 浏览器路径解析规则：直接写<img src='../src/assets/images/img_name.jpg'>时，这个路径是相对于浏览器加载的HTML文件（打包后在build根目录）的，而打包后的产物里根本不存在../src这个目录（源码里的src不会完整保留到打包结果中），浏览器自然找不到对应的图片文件。

• 源码路径与运行路径的差异：你源码里的相对路径是给打包工具（Webpack）识别用的，浏览器只认打包后输出目录的结构，不认你开发时的源码目录结构，这就是两种引用方式结果不同的核心原因。

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