If you do not want to upload an image to the image block Builder provides and instead just want it to link to an external image you uploaded elsewhere, you can do that with a simple data binding in Builder. Let’s say I want to use the following image url instead of uploading it to builder: https://www.cdc.gov/healthypets/images/pets/cute-dog-headshot.jpg.
First, drag an image block onto the Builder page you want to use the image on. Next, select that image block, and click on the data tab. On that tab, click + NEW BINDING:
After selecting Image, paste the image url surrounded by quotes in the choose binding box (e.g. "https://www.cdc.gov/healthypets/images/pets/cute-dog-headshot.jpg"). The quotes are necessary because it is a string that will be used in the JavaScript on the page.
I have a similar use case, I tried this and it works but then this doesn’t provide any image optimisation. i.e. it always loads the image in high resolution. Is there a way to specify something like srcset?
Specifying a srcset attribute doesn’t appear to be possible in the visual editor. The image block sets a srcset by generating a series of URLs for different sizes of images to fetch from our content delivery network. Please check out line 95 of the open-source code of the Image block to see what that function looks like: builder/Image.tsx at main · BuilderIO/builder · GitHub.
If you are using React or Next, you can create your own custom components. You could create a new input for the image block that takes in the desired srcset, or write a function that generates one for you. If you haven’t created a custom component before, you can check out our guide here: How to drag+drop to build pages visually with your React components
If you are not using React or Next, please let me know! I can reach out to the dev team here at Builder to confirm if there is some way of doing this in the Visual Editor. Could you share a little about the scope of this usecase? Would you be setting a srcset for many images, or just a few?
