Weweb image can't load from external URL

Ask us anything
1

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”

2

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

CleanShot 2024-08-03 at 09.28.42
CleanShot 2024-08-03 at 09.28.42736×191 20.3 KB

3

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.

4

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

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

Screenshot 2024-08-04 at 3.16.57 PM
Screenshot 2024-08-04 at 3.16.57 PM1912×822 157 KB

5

hmmm… embeds huh, do you have recommended source ?

6

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.

7

thank you broberto

8

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