Webstudio
Log in

Join the Webstudio community

Updated last month

Using images in HTML Embed element

At a glance

The community member encountered a CORS error when trying to use an image stored in Webstudio in an embedded HTML element. After some discussion, it was determined that the image URL provided by Webstudio is not intended to be used directly in this way, as it is a protection against misuse. The community members suggested alternatives, such as rendering the image on the page in a hidden container and using JavaScript to retrieve the HTML, or hosting the image elsewhere. The community member decided to host the images elsewhere, as this seemed like the easiest solution.

Useful resources
ttom
·
I uploaded an image to the storage and referenced it in an embedded HTML. It works fine in the development environment, but in production, I’m encountering a CORS error. Does anyone have suggestions on how to resolve this?
OOleg Isonen
Marked as solution
So basically you got html and css somewhere else, then wanted to combine it with the image hosted on Webstudio. Got it.
View full solution
O
t
16 comments
OOleg Isonen
please share a link
ttom
https://p-1a567bbd-f187-4d82-86db-1a1cec920e54.apps.webstudio.is/cgi/image/built-with-appwrite_bXXS1FkrPwM8RNuyzWruj.svg?width=3840&quality=80&format=auto
But it's not related to a specific image, seem sto be the same case for all of them
OOleg Isonen
I mean please share the link to the the site where you see the error
ttom
https://getcodeless.wstd.io/
OOleg Isonen
Now I understand, you used that link to the image that only works in the builder and published with it
Attachment
image.png
OOleg Isonen
that link can not be used this way, its a protection against misusage
OOleg Isonen
Can you use the image by selecting it in the builder instead of copying the url?
ttom
You tell me, I want to use the image inside the HTML embed element. I didn't find a way how to use it other than linking it like this. Hopefully I just didn't know how.
OOleg Isonen
Any particular reason for using it in html embed? I would try to avoid it, but if you must, render it on the page in a hidden container, then use JS to get innerHTML from that element
OOleg Isonen
Note that this will only work on the client, its not going to be part of server-rendered html
ttom
I wanted to use an image in the html embed. And thought it would be incredibly convenient if the image is stored in Webstudio itself. I think I the easiest workaround for me is to store it someone else then.
OOleg Isonen
what's your use case? just so I understand why its necessary
ttom
I have a nice card and I want to show an image in the card. I already had the code for the card, it was easier to use the code than to drag and drop the card.
OOleg Isonen
So basically you got html and css somewhere else, then wanted to combine it with the image hosted on Webstudio. Got it.
OOleg Isonen
This is currently not well supported / recommended. To do this we need to support:

  1. pasting html to create webstudio instances
  2. pasting css with selectors etc (in case you used any) to turn them into webstudio styles/tokens. You can paste style blocks right now in the advanced panel and it will be converted, but not entire css rules with selectors.
ttom
Wonderful. I decided to just host the images elsewhere, this seemed like the easiest solution. Thank you Oleg for all the support 🙂
Add a reply
Sign up and join the conversation on Discord