Join the Webstudio community

Updated 2 months ago

How to refer to an image in the assets through 'HTML Embed'?

At a glance
The community member asked if there is a URL they can copy somewhere. The comments suggest that the community member is trying to use images from the website's assets in an HTML Embed component, but is having trouble getting the script to work with the components. The community members provide suggestions, such as rebuilding the component instead of using an embed, using the image component for responsive rendering, and adding classes to the elements for the script to work. They also discuss how to add a <link /> element for a specific page and whether to use "Client Only" mode or server-side rendering. There is no explicitly marked answer in the comments.
Useful resources
Is there an URL that I can copy somewhere?
J
O
17 comments
@᲼Amin, can you explain your question more. Maybe show screenshots or code snippets of what you're trying to achieve.
I have this in a HTML Embed component
But I want to use images from the assets of the website itself
So the "direct URL" to the images
Why not simply rebuild that instead of using an embed? You could then benefit from the image optimization that comes with Webstudio and handle the responsiveness more easily.

Otherwise, you'd need to write javascript to replace those items, which isn't efficient or recommended.
because it's a carrousel, and I can't get the script to work with the components
sure you can 🙂

You probably need to add the classes to the elements for it to work. Send the script and markup and I can show you how to make it.
If script doesn't take img tags, the render them as img tags and get the source with the script
I would still recommend using image component as it renders responsively
Thank you for wanting to help, I'm trying myself again and if I can't get it done, I will show it
Yes you are right, but do you know how can I add a link element for a specific page?
Like
Plain Text
<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">
With 'Client Only' turned on or off?
link itself could be server-side too but if you don't need it to be render blocking then use client only
Got it, thanks for all the help!
Add a reply
Sign up and join the conversation on Discord