This is the image URL I got from an api
this is my HTML
<img src="https://scontent-jnb1-1.cdninstagram.com/v/t51.2885-15/e15/242204298_1728375270686500_5634415857798350440_n.jpg?_nc_ht=scontent-jnb1-1.cdninstagram.com&_nc_cat=104&_nc_ohc=3O8LpuGJsdUAX_E1Dxz&edm=AHlfZHwBAAAA&ccb=7-4&oh=0a22779e81f47ddb84155f98f6f5f75f&oe=6148F26D&_nc_sid=21929d">
I see the image when I go to the URL, directly through the browser. But it is not showing up on my website
When I checked the Debug Console I get this error.
Failed to load resource: net::ERR_BLOCKED_BY_RESPONSE.NotSameOrigin
when I googled this the problem might be due to some CORS Policy issue.
How to load this image on my website without messing with the policy and stuff...?
<img src="https://scontent-jnb1-1.cdninstagram.com/v/t51.2885-15/e15/242204298_1728375270686500_5634415857798350440_n.jpg?_nc_ht=scontent-jnb1-1.cdninstagram.com&_nc_cat=104&_nc_ohc=3O8LpuGJsdUAX_E1Dxz&edm=AHlfZHwBAAAA&ccb=7-4&oh=0a22779e81f47ddb84155f98f6f5f75f&oe=6148F26D&_nc_sid=21929d">this should fix it
helmet({
crossOriginResourcePolicy: false,
})
I was getting the same error while fetching images from different api.
I fixed the error by adding crossorigin="anonymous" in image tag.
Just add crossorigin="anonymous" in your img tag like:
<img crossorigin="anonymous" src="https://example.com/image.jpg">
this should resolve the error.
It's a CORS issue, and can only be solved server-side.
The response has the header cross-origin-resource-policy: same-origin which tells us that the resource can be accessed only by the same origin (when it's called inside a html page, using modern browsers)
You might host the image in another place to use it.
Reference: https://developer.mozilla.org/en-US/docs/Web/HTTP/Cross-Origin_Resource_Policy_(CORP)