Images not displayed in external browsers


#1

Hello everybody,

I have an Image component were the Image Path property are urls.
Some images are displayed without any problems and some are not displayed at all (all images are jpg).
For example, this one is not displayed:

In the Noodl preview browser, there is no problem at all.


#2

The issue is due to a security feature in browsers called CORS. The browser refuses to download the picture since the server isn’t explicitly saying that it’s OK. In Noodl we’ve disabled this security feature and will download the image anyway.

A quick solution is to use a proxy that’ll tell the browser it’s OK to download the image and that it’s safe. There’s a free one you can use here: https://cors-anywhere.herokuapp.com/

You simply add https://cors-anywhere.herokuapp.com/ in front of all image URLs (so the image above becomes https://cors-anywhere.herokuapp.com/https://discourse-cdn-sjc2.com/standard17/uploads/getnoodl1/original/1X/11e7929f782d159c8b61dc3ec3f7db43c4c777b0.jpeg)

Note that it requires the proxy server to download that image first before you can download it, so it can be quite slow when you have large images like the one you attached. Another caveat is that the admin of the proxy server can see everything you route through it, so don’t use it for sensitive data.

Hope that helps!


#3

It works! Thank you.