NextJS部署至Azure App Service后PNG图片加载失败求助

我将一个使用本地图片（存放于/public目录）的NextJS应用部署至Linux版Azure App Service，本地通过npm run dev或npm run build && npm start运行时图片均正常显示，但通过Github Actions部署后仅.webp格式图片可加载，所有.png格式图片失效。已尝试检查文件名大小写、调整图片导入方式（

return (<Image/>)

/img组件、相对路径/静态导入）、添加sharp依赖等方法，均未解决。相关配置如下：

next.config.js 配置 #

const withImages = require("next-images");

/** @type {import('next').NextConfig} */
const nextConfig = withImages({
  reactStrictMode: true,
  pageExtensions: ["tsx"],
  images: {
    formats: ["image/webp", "image/avif"],
    domains: ["my-app-url.azurewebsites.net/"],
  },
});

module.exports = nextConfig;

流水线yml配置 #

# Docs for the Azure Web Apps Deploy action: https://github.com/Azure/webapps-deploy
# More GitHub Actions for Azure: https://github.com/Azure/actions

name: Build and deploy Node.js app to Azure Web App

on:
  push:
    branches:
      - develop
  workflow_dispatch:

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v3

      - name: Set up Node.js version
        uses: actions/setup-node@v3
        with:
          node-version: "18.x"

      - name: npm install, build, and test
        run: |
          npm install
          npm run build --if-present
          npm run test --if-present

      - name: Zip all files for upload between jobs
        run: zip next.zip ./* .next -qr

      - name: Upload artifact for deployment job
        uses: actions/upload-artifact@v3
        with:
          name: node-app
          path: next.zip

  deploy:
    runs-on: ubuntu-latest
    needs: build
    environment:
      name: "Production"
      url: ${{ steps.deploy-to-webapp.outputs.webapp-url }}

    steps:
      - name: Download artifact from build job
        uses: actions/download-artifact@v3
        with:
          name: node-app

      - name: "Deploy to Azure Web App"
        id: deploy-to-webapp
        uses: azure/webapps-deploy@v2
        with:
          app-name: "my-app-name"
          slot-name: "Production"
          publish-profile: ${{ secrets.AZUREAPPSERVICE_PUBLISHPROFILE }}
          package: next.zip

      - name: Delete zip file
        run: rm next.zip

---

修复方案 #

1. 移除next-images插件，改用Next.js内置图片处理 #

Next.js 10+已原生支持图片优化，next-images插件会与内置功能冲突，导致PNG资源未被正确处理。

修改next.config.js：

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  pageExtensions: ["tsx"],
  images: {
    formats: ["image/webp", "image/avif"],
    domains: ["my-app-url.azurewebsites.net"], // 移除末尾斜杠
    unoptimized: false, // 确保启用图片优化
  },
};

module.exports = nextConfig;

同时卸载插件：

npm uninstall next-images

2. 修复流水线压缩命令，确保包含所有静态资源 #

当前zip命令可能未完整打包public目录下的PNG文件，调整为明确指定需要打包的资源：

zip next.zip public .next package.json package-lock.json -qr

3. 验证Azure静态文件MIME类型配置 #

Linux版Azure App Service默认识别PNG的MIME类型，若存在自定义配置异常，可在项目根目录添加staticwebapp.config.json：

{
  "mimeTypes": {
    ".png": "image/png"
  }
}

或通过Azure Portal的「配置」→「应用程序设置」添加WEBSITE_MIME_TYPES，值设为.png=image/png。

4. 确保sharp依赖正确安装 #

在CI环境中，sharp依赖可能因系统差异安装异常，可在npm install步骤强制安装：

npm install sharp --force

5. 验证构建产物完整性 #

在Github Actions的build步骤添加验证命令，确认PNG文件被正确打包：

ls -la public/*.png

部署后也可通过Azure Kudu控制台，查看/home/site/wwwroot/public目录下是否存在目标PNG文件。

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