next/image went missing when deployed to AWS (Next.js)

Question

Folder structure as below:

|-root
  |-pages
    |-_app.tsx
    |-index.tsx
  |-public
    |-logo.svg
    |-image.png
    |-image2.png
    |-image3.png

When I run yarn build and yarn start in localhost, my image files can be found in the following locations:

Everything works fine if I deploy it via Vercel. However, when I tried to deploy on AWS(ECR image), only SVG files were found. Error showing

Failed to load resource: the server responded with a status of 400 ()

Also it shows "url" parameter is required when I click those image URL.

Could you please let me know what the issue is?

Edit: PNG files aren't created when deployed to AWS

score 0 · Accepted Answer · answered Jun 28 '22 at 02:27

I eventually found out that it was a configuration issue with Nginx.

As Nextjs Image component will send the image source path with the size through url query string, so

  location ~* ^/(.*) {
    proxy_pass  http://service_url/$1$is_args$args;
  }

1 Answers1