Next image are not loading on netlify preview

I have an issue where my next/image is not loading on netlify preview.

LINK: Dev Academy - Style Guide: Media Player

If you check the topmost, there are 2 broken images, though it works when I ran it on my local.

Please note that I was able to resolve the first broken image when I specified the redirects below. However, it’s not working for external images

netlify.toml:

[[redirects]]
  from = '/_next/image/*'
  query = { q = ':quality', url = ':url', w = ':width' }
  to = '/.netlify/images?url=:url&w=:width&q=:quality'
  status = 200
  force = true

I have already searched from this forum if anyone encountered this, but they have different scenarios. I tried to follow the suggested solutions, but none of them could fix my problem.

I wanted to get this running without the redirects on netlify.toml and rely solely on the next image. Hopefully, someone can help me with this. I also want to understand if this is a config issue on nextjs or something?

Thank you

I found out that to make the remote images work, I still need to register the “remote images” in netlify.toml

[images]
  remote_images = []

But, is it possible for the default next/image to work without using a redirect to netlify image cdn?

Found the solution. It’s the one below

DIABLE_IPX= "false"

thanks for writing in and sharing your solution with the community!