部署到Azure Web App的Next.js应用无法加载public文件夹图片怎么解决？

解决方案 #

按优先级依次排查修改即可解决：

1. 补全部署文件
   你目前仅上传了.next文件夹、web.config、server.js，缺失了存放静态资源的public文件夹。请将项目根目录下完整的public文件夹一同上传到Azure Web App的应用根目录，确保public/imgs/logo.png路径在服务端真实存在。

2. 修正web.config静态资源重写规则
   原有静态资源规则未做文件存在校验，会将所有请求都重写到public目录下，导致非静态资源路径报错。将StaticContent规则修改为以下内容：

<rule name="StaticContent" stopProcessing="true">
  <conditions>
    <add input="{DOCUMENT_ROOT}/public{REQUEST_URI}" matchType="IsFile" negate="false" />
  </conditions>
  <action type="Rewrite" url="public{REQUEST_URI}"/>
</rule>

如果仍存在图片格式无法识别的问题，在system.webServer节点下添加MIME类型声明：

<staticContent>
  <remove fileExtension=".png" />
  <mimeMap fileExtension=".png" mimeType="image/png" />
  <remove fileExtension=".jpg" />
  <mimeMap fileExtension=".jpg" mimeType="image/jpeg" />
  <remove fileExtension=".svg" />
  <mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
</staticContent>

3. 修正server.js的环境变量判断逻辑
   你当前使用自定义的ENV变量判断运行环境，Azure默认不会自动配置该变量，会导致生产环境下Next.js错误运行在开发模式。要么在Azure Web App的应用设置中添加键为ENV、值为production的配置项，要么直接修改为使用Node生态标准的NODE_ENV变量（Azure会自动为生产环境配置该变量）：

// 将原有isDev定义替换为这行
const isDev = process.env.NODE_ENV !== "production";

4. 移除冗余依赖（可选）
   如果你的Next.js版本≥12，框架本身已经内置了public目录静态资源的处理能力，不需要额外安装next-images插件，可直接卸载该依赖并修改next.config.js去掉withImages包裹即可，避免插件和内置能力冲突。

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