in my next.js application, external images url is not working. it is showing 404 error

[himanshuthakurmagictym]

in my next.js application, external images url is not working. it is showing a 404 error.

i have using my api in config file
module.exports = {
reactStrictMode: true,
images: {
domains: ['gyaanapi.herokuapp.com'],
},

}

Url:https://gyanais.vercel.app/courses

Screenshort: https://prnt.sc/RK0O18J6gTlf

[icyJoseph]

Hi,

I cannot manually reach the images either, for example:

I looked at the request made by next/image and it uses this url:

https%3A%2F%2Fgyaanapi.herokuapp.com%2Fpublic%5Cimages%5Ccategory%5C3.png

When I decode it:

decodeURIComponent(url) // 'https://gyaanapi.herokuapp.com/public\\images\\category\\3.png'

I guess the problem are the \\.

However, doing:

fetch(decodeURIComponent(url)).then(console.log)

Return 200, so perhaps fetch understands the back slashes better?

Could you try to change the next/image urls to use one / instead of \\?