Webstudio
Log in

Join the Webstudio community

Updated 6 months ago

Images are not rendering when populated from API

At a glance

The community member is having issues with fetching images from an API in Webstudio. They are trying to fetch a collection created in Strapi using the "Resource" variable, but the images are not rendering properly. The community member has observed that the image URL is being prefixed with the local host URL, which is causing the issue.

In the comments, another community member confirms that the issue is happening when using the builder locally. They suggest disabling a feature that might be causing the issue. Another community member mentions talking to an engineer, who suggested setting an environment variable to resolve the issue. This solution worked for the original community member.

However, some other community members are still unsure about the exact environment setup required to resolve the issue and are seeking further insights.

Useful resources
SSony Antony
·
It's great what I am able to do with API integration in webstudio. But I have some issues with fetching images from API.

I am trying to fetch a collection created in Strapi using "Resource" variable into Webstudio page. When the image is mapped to the "Source" field as URL the image is not getting rendered properly.


By investigating further observed the image URL as follows:
https://localhost:5173/cgi/image/https%3A//inspiring-candy-d5ab9b6954.media.strapiapp.com/imagename.jpg?width=640&quality=80&format=auto

I understand that the root path is getting attached to the original URL path from API.
How do I resolve? Any help is appreciated.
Attachment
image.png
J
S
K
7 comments
JJohn Siciliano
Are you using the builder locally by chance? And am I correct in understanding the screenshot shows the right URL but when you inspect the page it shows the local host url?
SSony Antony
Yes, I am using the builder locally.
And yes, your understanding is correct. When we inspect, the localhost url is prefixed to the image URL received through API.

It is not just through API. IF you copy paste any external image url in that field, it will not render.
KKerim
Is this feature on? Disabling might help.
Attachment
Screenshot_2024-09-19_at_15.56.45.png
JJohn Siciliano
Talked to an engineer and there should be some env variable you can set. Might take some digging on what exactly but something like env.development file
https://wstd.dev:5173/cgi/image
SSony Antony
This solution worked. Thanks buddy.
SSony Antony
I couldn't see anything in the URL mentioned. Any insights on what could be the envmt setup to do?
SSony Antony
Still wondering if there could anything more into this issue?
Add a reply
Sign up and join the conversation on Discord