Next.js项目中本地SVG经img标签引入仅显示alt属性的问题排查

1. 资源导入路径逻辑不符合Next.js约定 #

Next.js 约定public目录为静态资源服务根路径，放置在该目录下的文件无需通过相对路径import引入：

• 按当前写法import appleMusic from '../public/Applemusic.svg'，从src目录下的组件出发解析路径时，会把public内的资源识别为需要webpack打包的模块，路径解析结果直接错误，拿到不存在的资源地址，自然加载失败。
• public目录下的SVG正确引用方式为直接使用根路径映射：<img src="/Applemusic.svg" alt="Apple Music" />，全程不需要走import流程。
• 如果需要通过模块化import的方式引入SVG（比如后续做组件化SVG处理），需要把SVG文件从public目录挪到src目录下的自定义资源文件夹（比如src/assets），此时相对路径的import语法才会被webpack正常解析。

2. 配置参数传递失效 #

当前写的enableSvg: true属于完全未被识别的无效配置：

• 配置中嵌套使用的withImages、withTM、withFonts都是Next.js 12及更早版本的第三方适配插件，这类插件的配置项需要在插件调用时作为入参传递，而非写在最内层的通用配置对象里——把参数埋在最内层配置块中，外层的插件链根本读不到这个参数，等于没有开启SVG的加载支持。
• 以next-images插件为例，正确的SVG开启方式是将配置直接传给插件本身：withImages({ enableSvg: true })(基础配置)，而非把enableSvg写在通用配置块里。
• 如果使用Next.js 13及以上版本，原生已经支持静态资源服务，不需要额外引入withImages这类旧版插件，冗余的插件嵌套反而可能导致资源路径解析冲突。

3. 容易被忽略的隐性排查点 #

• 核对SVG文件本身的有效性：如果导出的SVG文件缺少XML声明、或是其他格式修改了后缀名，浏览器判定资源无法作为图片渲染时，会直接fallback显示alt内容。
• 核对文件名大小写匹配：导入时写的文件名大小写需要和实际磁盘上的文件名完全一致，尤其是Linux部署环境下对文件名大小写敏感，大小写不匹配会直接返回404资源。

内容的提问来源于stack exchange，提问作者Maxime Ghéraille