Next/image is not responding

Question

On Next 13, after replacing <img for <Image, the image requests never loads.

Its a Magento image, coming from the product.
However, Magento's server never receives the GET request from next for the image.
For example: http://localhost:3000/_next/image?url=https%3A%2F%2Fmagento2.magenteiro.com%2Fmedia%2Fcatalog%2Fproduct%2Fcache%2Fcb2ae50ad1efe9ed2d45d11fc48a28dc%2Fl%2Ft%2Flt01.jpg&w=3840&q=75/

I can decode 2 URL's from here:

Both would load an image from the remote server, but next never got there.

Am I missing something?

# next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  experimental: {appDir: true},
  images:{
    domains: ['www.floatui.com', 'magento2.magenteiro.com', 'source.unsplash.com']
  }
}

module.exports = nextConfig

Part of my productList.jsx component:

{products.map((product) => (
                <>
              <a key={product.url_key} href={product.url_key} className="group">
                <div className="aspect-w-1 aspect-h-1 w-full overflow-hidden rounded-lg bg-gray-200 xl:aspect-w-7 xl:aspect-h-8">
                  <Image
                    src={product.image.url}
                    alt={product.image.label}
                    title={product.image.label}
                    fill={true}
                    className="h-full w-full object-cover object-center group-hover:opacity-75"
                  />
                </div>
                <h3 className="mt-4 text-sm text-gray-700">{product.name}</h3>
                <p className="mt-1 text-lg font-medium text-gray-900">$ {product.price_range.minimum_price.final_price.value}</p>
              </a>
                    {product.image.url}
                </>
            ))}

In another attempt to figure this out, I served my /public/images directory with php server, and replaced src="http://localhost:4444/produto2.jpg".

I could confirm that next called the URL, but it never finishes loading the image.

If I add unoptimized={true} forcing Image to request the original image, then it works.

score 0 · Answer 1 · answered Nov 18 '22 at 03:48

It seems to be a bug on Next in some version between 13.0.0 and 13.0.2.

I started a new project and it worked. The new project was using Next 13.0.3.

So, upgrading Next.js (npm i next@13.*) solved the problem for me.

Note that by doing this, you will be changing your constraint, and newer versions of Next.js 13 may be installed on your system.

Next/image is not responding

1 Answers1