Search code examples
htmlimageurlinstagram

img tag doesn't show the image from an instagram url


I have the url to the instagram image, and I want to show it on my website. However, when I place the link in the <img src = "url_here" tag the image is broken.

Also when I just click on the url everything is ok! What am I doing wrong?

Example image link: https://scontent-hel3-1.cdninstagram.com/v/t51.2885-15/e35/s1080x1080/234879879_210397201037827_5953739215853095188_n.jpg?_nc_ht=scontent-hel3-1.cdninstagram.com&_nc_cat=107&_nc_ohc=ihwB1S1gPeMAX_87sTe&edm=ABfd0MgBAAAA&ccb=7-4&oh=bcb123def0c585cd7bb091373932c2c7&oe=611D6840&_nc_sid=7bff83


Solution

  • You cannot make that work. If you check the devtools of your browser, in the "network" tab, you will see that the request for the image is blocked. That is because the server expects a request from the same origin, as shown in this response header:

    cross-origin-resource-policy: same-origin

    You can read more about it here: https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy

    There is no way to circumvent that, except by proxying the request using an other server that will download the image before sending it to the user's browser.