部署至Azure App Service的Angular应用无法加载WebP图片求助

• 先确认web.config的配置结构是否正确，仅添加mimeMap可能不够，还需确保路由重写规则不会拦截静态文件请求。完整的web.config配置如下：

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <staticContent>
      <!-- 正确配置WebP的MIME类型 -->
      <mimeMap fileExtension=".webp" mimeType="image/webp" />
    </staticContent>
    <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" />
            <!-- 排除静态文件后缀，避免路由重写拦截WebP等资源 -->
            <add input="{REQUEST_URI}" pattern="\.(webp|png|jpg|jpeg|gif|css|js|svg)$" negate="true" />
          </conditions>
          <action type="Rewrite" url="/index.html" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

• 检查WebP文件是否成功部署到Azure App Service：
  1. 登录Azure门户，进入目标App Service，打开「高级工具」>「Go」进入Kudu控制台
  2. 进入site/wwwroot目录，确认WebP文件存在于对应路径（比如assets/images下）
  3. 如果文件缺失，检查Angular项目的angular.json，确保assets数组包含WebP所在目录，示例配置：

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

同时确认构建命令（如ng build --configuration production）未排除这些文件。

• 重启Azure App Service并清除缓存：
  1. 在Azure门户的App Service页面点击「重启」按钮
  2. 若启用了Azure CDN，进入CDN资源页执行「刷新」操作，更新缓存的旧配置

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