0

I have this NextJS app being deployed to an Azure App Service (Linux), using local images (everything into /public).

While running the app locally (with npm run dev) or building + starting it locally (npm run build and npm start), everything works fine, images are rendered as expected, BUT when I deploy it to Azure, via Github Actions, the app is running but the only images that get rendered are the .webp. All my .png are broken.

I have researched a lot and I tried a LOT of things from Stack Overflow and others, but no success.

  • I checked for letters casing in the filenames
  • I tried importing the images pointing to the /public folder (eg. import Image1 from '../../public/images;my-image.png)
  • I tried using <Image /> with relative import to public folder (eg. <Image src="/images/my-image.png" />) and with static import.
  • I tried adding sharp in my project dependencies
  • I tried using <img /> with relative import to public folder (eg. <img src="/images/my-image.png" />) and with static import

This is my 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;

This is my pipeline 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

And I tried a couple things more that I can't remember anymore right now, but NOTHING worked so far.

The funny thing is the fact that the .webp images are working while PNGs are not.

I don't know what to do anymore, may anyone give me some light here?

Marcelino Borges
  • 33
  • 6
  • I could be wrong, I can see only webp and avif added in the code. Did you try adding PNG [here](https://i.imgur.com/4Jxt5sE.png). – Pravallika KV Jul 31 '23 at 06:02
  • It doesn't accept other formats in this array. Because this array holds the optimized formats generated by Next's optimization library (next/image and next-images) in runtime. So first it checks if the browser accepts webp and serves this format; if the browser doesn't support webp, it tries avif; if the browser doesn't support avif, it falls back to the original format (it would be png in my case). – Marcelino Borges Jul 31 '23 at 12:42
  • Anyway, I did try to add png in this array, but I got an error saying I can't other formats in there – Marcelino Borges Jul 31 '23 at 13:42

0 Answers0