为何React中直接使用图片相对路径作为img src失效，import方式却正常？

• 用import导入能正常显示的原因：
  你写import picture from "../../../images/picture.jpeg"时，是靠Webpack、Vite这类构建工具在打包时处理的。工具会找到这张图片，给它重命名（避免重名冲突），然后打包到输出目录的指定位置，最后把处理后的真实URL赋值给picture变量。你用src={picture}时，其实指向的是构建后正确的资源地址，所以图片能正常显示。

• 直接写相对路径找不到的原因：
  当你直接在img的src里写../../../images/picture.jpeg，这个路径是给浏览器看的，它会相对于最终加载的HTML文件的位置去查找。但打包后，你的组件代码会被放到dist这类目录里，图片也被构建工具移到了其他位置，源码里的相对路径在浏览器环境下已经不对了，自然找不到图片。

• 另一种不用import的解决办法：
  把图片放到项目的public目录里，然后用src="/images/picture.jpeg"这种根路径写法。因为public里的文件会被原封不动复制到构建输出的根目录，浏览器从根目录找就能准确拿到图片。

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