Home App Docs Blog Github

How do I link an image block to an external image without uploading it?

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:

Next, select Image in the “choose property” dropdown by click the down caret to open the menu

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.

That’s it!

To see an example of this in action, visit this fiddle: https://builder.io/fiddle/6a9deac7481d4873a7a3758146c76458