Angular应用部署至Azure App Service后图片无法显示问题咨询

核心问题原因 #

图片请求返回text/html而非正确的image/png，通常是IIS未正确映射静态文件MIME类型，或是Angular路由重写规则导致静态文件请求被导向index.html。

具体解决步骤 #

1. 确认Angular构建配置与产物 #

• 检查angular.json中的assets配置，确保图片所在目录被包含，示例：

  "assets": [
    "src/favicon.ico",
    "src/assets"
  ]
  

• 使用生产环境命令构建：

  ng build --configuration production
  

  确保部署的是dist目录下的完整构建产物，图片文件需存在于对应路径中。

2. 添加/修改web.config文件（Windows环境） #

在项目根目录创建或修改web.config，同时配置MIME类型映射与路由重写规则：

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <!-- 配置图片等静态文件的MIME类型 -->
    <staticContent>
      <mimeMap fileExtension=".png" mimeType="image/png" />
      <mimeMap fileExtension=".jpg" mimeType="image/jpeg" />
      <mimeMap fileExtension=".jpeg" mimeType="image/jpeg" />
      <mimeMap fileExtension=".gif" mimeType="image/gif" />
      <!-- 按需添加其他图片/静态文件格式 -->
    </staticContent>
    <!-- Angular路由重写规则，避免静态文件请求被导向index.html -->
    <rewrite>
      <rules>
        <rule name="Angular Routes" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="/index.html" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

将该文件包含在构建产物中，部署到Azure App Service。

3. 验证Azure部署设置 #

• 登录Azure门户，进入目标App Service的配置->常规设置，确认HTTP版本为2.0或1.1，无特殊限制。
• 检查部署中心，确认部署的是dist目录下的完整文件，未遗漏静态资源。

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