本文详解 Vue/React 等现代前端项目中 SVG 作为 <img> 标签 src 引用时在本地正常、上线后失效的根本原因，并提供符合构建工具（Vite/Vue CLI/Next.js 等）规范的正确路径处理方式与最佳实践。
本文详解 vue/react 等现代前端项目中 svg 作为 `` 标签 `src` 引用时在本地正常、上线后失效的根本原因，并提供符合构建工具（vite/vue cli/next.js 等）规范的正确路径处理方式与最佳实践。
在现代前端工程中，将 SVG 以 <img src="..."> 方式引入是一种常见且语义清晰的做法。但开发者常遇到一个典型问题：SVG 在本地开发服务器（如 vite dev 或 npm start）下可正常渲染，一旦部署到 Vercel、Netlify 或 GitHub Pages，图片却完全消失，浏览器控制台报 404 错误——尽管路径看似“正确”。
根本原因在于：构建工具不会自动将 src/ 目录下的资源视为静态资产进行复制，而是仅处理 public/ 目录或通过模块导入的资源。你写的：
<img src="/src/assets/logo-bookmark-white.svg" alt="" />
该路径 /src/assets/... 是源码路径，而非构建后的输出路径。本地开发服务器（如 Vite 的 dev server）具备“源码级路径解析”能力，能临时映射 /src/ 下的文件；但生产构建后，打包产物（如 dist/ 或 .vercel/output/static/）中并不存在 /src/ 目录结构，因此该请求必然失败。
✅ 正确做法是将 SVG 资源置于 public/ 目录下（Vite、Vue CLI、Create React App 均支持），并使用根对路径（root-relative path） 引用：
<!-- ✅ 推荐：将 logo-bookmark-white.svg 移至 public/assets/ --> <img src="/assets/logo-bookmark-white.svg" alt="Bookmark Logo" />
? 注意：public/ 中的文件会原样复制到构建输出根目录，无需导入、无哈希重命名，路径以 / 开头即表示从站点根目录开始查找。
❌ 错误示例（除调试外不推荐）：
<!-- ❌ 不要写 ./src/... —— 构建后该路径不存在 --> <img src="./src/assets/logo-bookmark-white.svg" alt="" /> <!-- ❌ 不要依赖外部图床（如 Imgur）—— 迯离项目管控、影响加载性能与稳定性 --> <img src="https://i.imgur.com/xxx.svg" alt="" />
? 补充建议（进阶）：
- 若需 SVG 内联（支持样式控制、无障碍优化），推荐使用 import + react-svg（React）或 <component :is="svgComponent"/>（Vue）；
- 使用 vite-plugin-svgr 或 @svgr/webpack 可将 SVG 转为 React 组件；
- 所有静态资源路径务必以 / 开头（如 /assets/icon.svg），避免相对路径（./ 或 ../）在嵌套路由页面中失效。
? 总结：
SVG 不显示 ≠ 路径写错，而是混淆了「开发源码路径」与「生产静态资源路径」。统一将 SVG 放入 public/ 并用 / 开头的绝对路径引用，是最轻量、最可靠、最符合构建规范的解法。
