Angular 8部署至IIS后SVG图片无法加载问题求助

我之前部署Angular应用到IIS时也碰到过类似的SVG加载失败的情况，给你几个实用的排查和解决方向：

1. 确认Angular构建时的资源路径与配置 #

• 首先检查index.html中SVG的引用路径：如果是根目录下的SVG，建议使用绝对路径（比如<img src="/your-file.svg">），避免相对路径在prod构建后出现解析问题。同时确认index.html里的<base href="/">设置正确（如果部署在根目录的话）。
• 检查angular.json的assets配置：确保你的SVG文件被包含在构建资源列表中，这样prod构建时才会被复制到dist文件夹。比如：

"assets": [
  "src/favicon.ico",
  "src/assets",
  "src/your-svg-file.svg" // 这里加上你的SVG文件名
]

修改后重新执行ng build --prod，再替换dist文件夹到IIS。

2. 配置IIS的SVG MIME类型 #

IIS默认没有配置SVG的MIME类型，这是最常见的原因之一：

• 打开IIS管理器，找到你的站点，双击MIME类型；
• 右键选择「添加」，扩展名填.svg，MIME类型填image/svg+xml；
• 重启IIS站点，再刷新页面试试。

3. 检查IIS静态内容服务是否安装 #

如果IIS没有安装「静态内容」角色服务，静态文件（包括SVG）无法被正常提供：

• 打开服务器管理器，选择「添加角色和功能」；
• 找到「Web服务器（IIS）」→「Web服务器」→「常见HTTP功能」，确保「静态内容」已勾选；
• 如果没安装，勾选后完成安装，重启IIS。

4. 清除浏览器缓存 #

有时候浏览器会缓存旧的资源，导致新的SVG无法加载：

• 按Ctrl+F5强制刷新页面；
• 或者打开浏览器开发者工具（F12），在「网络」选项卡勾选「禁用缓存」，再重新加载页面。

5. 再次确认文件权限与存在性 #

虽然你已经设置了权限，但可以再确认下：

• 检查dist目录下确实存在该SVG文件，且文件名大小写与引用一致（Windows IIS默认不区分大小写，但Angular构建可能保留大小写，避免拼写错误）；
• 右键SVG文件→「属性」→「安全」，确认Everyone组有读取权限（完全控制没必要，读取就够了）。

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