Weweb image can't load from external URL

i have this image URL that i get from instagram api, weweb image component could not render this image, why is that ?

this is the URL
https://scontent-lis1-1.cdninstagram.com/v/t51.2885-19/432797586_3284222671874361_3665384515896198354_n.jpg?stp=dst-jpg_e0_s150x150&_nc_ht=scontent-lis1-1.cdninstagram.com&_nc_cat=109&_nc_ohc=_EBlsEip1j4Q7kNvgHGInIP&gid=cc044a9c8cff478caf899aeceb3556f4&edm=AM7KJZYBAAAA&ccb=7-5&oh=00_AYC1y6Q-s7KVqVEEXwxnPhs6s8hhPd0R_p9f1LrRYtVtHg&oe=66B2C7AC&_nc_sid=8ec269

I think that’s because the the server has CORS restriction. If you look at the Network panel in the dev tools, you can see this message on the image request

Yeah, Instagram blocks hotlinking - which as JP said - throws CORS errors, I’ve had this on a partner’s project. There is ways, but I think the best course of action is to just find a different source, or use their embeds.

for future reference, what are the steps to see this error ?

i don’t see this error on the network → image

hmmm… embeds huh, do you have recommended source ?

Instagram embeds, I saw them on some sites. A quick google should give you some results. As for the CORS errors you can find them when the image embed fails in the Dev Tools → Network tab.

1 Like

thank you broberto

1 Like

Okay so for anyone that has this issue, my solution is to

  1. create a file resource from that URL
  2. create image metadata
  3. store it on xano database and get URL made by xano