404 on Image load

The images seem to be sending 404 for images once deployed to Netlify. It seems to be working locally and when the site is deployed to Vercel.

Here is my site ID: 0a94f62a-9637-464c-bfdd-336be667b859

You can check on this preview link: https://deploy-preview-89--professional6-staging.netlify.app/auth/login

Attaching the API request

the image seems to be coming from a url, you may try downloading it and add it on your assets folder and see if it works

hei @andrieflix, this is just an example I’m sharing with you: images coming from APIs, all are broken. They work locally, but on the Netlify-deployed site, we’re getting a 404 not found error. Even when I uploaded the same site to Vercel, the images are visible & working perfectly fine there.

Hi, @P_6. The issue here is that you are hotlinking to content you have no rights to be hotlinking to and wikia.nocookie.net is not allowing you to access the content.

Want proof? Here it comes!

First, let’s try the request to the content at wikia.nocookie.net without a referrer header:

$ curl --compressed -svo /dev/null --stderr - 'https://static.wikia.nocookie.net/dragonball/images/e/e4/Goku_arrives_colored.PNG/revision/latest?cb=20210204093245'  | egrep '^(<|>)'
> GET /dragonball/images/e/e4/Goku_arrives_colored.PNG/revision/latest?cb=20210204093245 HTTP/2
> Host: static.wikia.nocookie.net
> User-Agent: curl/8.7.1
> Accept: */*
> Accept-Encoding: deflate, gzip
>
< HTTP/2 200
< date: Sun, 01 Dec 2024 09:32:18 GMT
< surrogate-key: f3ceafa234a5e556ba27d242cede33c862e6af4d wiki-dragonball thumblr original
< content-disposition: inline; filename="Goku_arrives_colored.PNG.png"; filename*=UTF-8''Goku_arrives_colored.PNG.png
< content-type: image/png
< etag: "tG3y8V8JgJfj0UwjHFlgtw=="
< x-thumbnailer: Thumblr
< access-control-allow-origin: *
< access-control-allow-headers: Range
< content-security-policy: default-src 'none'; script-src 'none'; img-src 'self'; media-src 'self'; style-src 'unsafe-inline'; sandbox; report-uri https://services.fandom.com/csp-logger/csp/thumblr
< cache-control: public, max-age=31536000
< nel: {"report_to":"nel","max_age":604800,"failure_fraction":0.01}
< report-to: {"group":"nel","endpoints":[{"url":"https://services.fandom.com/browser-errors/report"}],"max_age":604800,"include_subdomains":true}
< content-length: 1269317
< x-envoy-upstream-service-time: 201
< server: envoy
< x-cacheable: YES
< age: 6272471
< accept-ranges: bytes
< vary: Accept
< x-cache: ORIGIN, HIT
< timing-allow-origin: *
< x-served-by: thumblr-799b89698-wnjp4, wk-cdn-s10
< x-cache-hits: ORIGIN, 844
<

See! I get a 200 status response. Now, let’s add your referrer header for your site:

$ curl --compressed -svo /dev/null --stderr - 'https://static.wikia.nocookie.net/dragonball/images/e/e4/Goku_arrives_colored.PNG/revision/latest?cb=20210204093245'   -H 'referer: https://deploy-preview-89--professional6-staging.netlify.app/auth/login'  | egrep '^(<|>)'
> GET /dragonball/images/e/e4/Goku_arrives_colored.PNG/revision/latest?cb=20210204093245 HTTP/2
> Host: static.wikia.nocookie.net
> User-Agent: curl/8.7.1
> Accept: */*
> Accept-Encoding: deflate, gzip
> referer: https://deploy-preview-89--professional6-staging.netlify.app/auth/login
>
< HTTP/2 404
< date: Wed, 22 Jan 2025 22:57:46 GMT
< content-type: image/jpeg
< access-control-allow-origin: *
< access-control-allow-headers: Range
< content-security-policy: default-src 'none'; script-src 'none'; img-src 'self'; media-src 'self'; style-src 'unsafe-inline'; sandbox; report-uri https://services.fandom.com/csp-logger/csp/thumblr
< cache-control: public, max-age=3600
< nel: {"report_to":"nel","max_age":604800,"failure_fraction":0.01}
< report-to: {"group":"nel","endpoints":[{"url":"https://services.fandom.com/browser-errors/report"}],"max_age":604800,"include_subdomains":true}
< content-length: 1976
< x-envoy-upstream-service-time: 0
< x-cacheable: YES
< age: 1731347
< vary: Accept-Encoding
< x-cache: ORIGIN, HIT
< timing-allow-origin: *
< x-served-by: thumblr-799b89698-6h9js, wk-cdn-s10
< x-cache-hits: ORIGIN, 8
<

Look at that! It is a 404 response.

Now, let’s do the same thing with the image CDN URL at Netlify without a referrer header:

$ curl --compressed -svo /dev/null --stderr -  'https://deploy-preview-89--professional6-staging.netlify.app/_next/image?url=https%3A%2F%2Fstatic.wikia.nocookie.net%2Fdragonball%2Fimages%2Fe%2Fe4%2FGoku_arrives_colored.PNG%2Frevision%2Flatest%3Fcb%3D20210204093245&w=256&q=75' | egrep '^(<|>)'
> GET /_next/image?url=https%3A%2F%2Fstatic.wikia.nocookie.net%2Fdragonball%2Fimages%2Fe%2Fe4%2FGoku_arrives_colored.PNG%2Frevision%2Flatest%3Fcb%3D20210204093245&w=256&q=75 HTTP/2
> Host: deploy-preview-89--professional6-staging.netlify.app
> User-Agent: curl/8.7.1
> Accept: */*
> Accept-Encoding: deflate, gzip
>
< HTTP/2 200
< age: 0
< cache-control: public,max-age=0,must-revalidate
< cache-status: "Netlify Edge"; fwd=miss
< content-security-policy: script-src 'none'
< content-type: image/webp
< date: Tue, 11 Feb 2025 23:57:51 GMT
< netlify-vary: query=timestamp|url|fit|width|crop|q|quality|fm|format|w|h|height|position,header=Netlify-Image-Accept
< server: Netlify
< strict-transport-security: max-age=31536000; includeSubDomains; preload
< vary: Accept-Encoding
< x-nf-request-id: 01JKVQ57DR7ZF2EZJ2DF1Q97BW
< x-robots-tag: noindex
< content-length: 32060
<

Look! Another 200 status!

Now, let’s add your referrer header back in:

$ curl --compressed -svo /dev/null --stderr -  'https://deploy-preview-89--professional6-staging.netlify.app/_next/image?url=https%3A%2F%2Fstatic.wikia.nocookie.net%2Fdragonball%2Fimages%2Fe%2Fe4%2FGoku_arrives_colored.PNG%2Frevision%2Flatest%3Fcb%3D20210204093245&w=256&q=75'  -H 'referer: https://deploy-preview-89--professional6-staging.netlify.app/auth/login'  | egrep '^(<|>)'
> GET /_next/image?url=https%3A%2F%2Fstatic.wikia.nocookie.net%2Fdragonball%2Fimages%2Fe%2Fe4%2FGoku_arrives_colored.PNG%2Frevision%2Flatest%3Fcb%3D20210204093245&w=256&q=75 HTTP/2
> Host: deploy-preview-89--professional6-staging.netlify.app
> User-Agent: curl/8.7.1
> Accept: */*
> Accept-Encoding: deflate, gzip
> referer: https://deploy-preview-89--professional6-staging.netlify.app/auth/login
>
< HTTP/2 404
< age: 0
< cache-status: "Netlify Edge"; fwd=miss
< date: Tue, 11 Feb 2025 23:58:29 GMT
< server: Netlify
< strict-transport-security: max-age=31536000; includeSubDomains; preload
< vary: Accept-Encoding
< x-nf-request-id: 01JKVQ6CDNEDAYQWTK6BHFQ4Y3
< x-robots-tag: noindex
< content-length: 0
<

So, this has nothing to do with Netlify and everything to do with you hotlinking to content you should not be hotlinking to. If you stop doing that, you won’t get 404s.

Note, this could be considered copyright infringement as well. Copyright infringement will absolutely get your account suspended at Netlify so you should be very careful about what content you include on your sites here. You probably should not have this image on your site at all unless you can prove you have written permission from the copyright owner to do so. If you do not have written permission to use that image, removing it entirely is you best course of action here.