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

**URL:** <https://forum.builder.io/t/how-do-i-link-an-image-block-to-an-external-image-without-uploading-it/404>\
**Category:** Technical Questions\
**Created:** [January 15, 2021, 6:43pm UTC](https://forum.builder.io/t/how-do-i-link-an-image-block-to-an-external-image-without-uploading-it/404 "2021-01-15T18:43:01Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![korey](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/korey/32/12_2.png) [@korey](https://forum.builder.io/u/korey)\
**Post date:** [January 15, 2021, 6:43pm UTC](https://forum.builder.io/t/how-do-i-link-an-image-block-to-an-external-image-without-uploading-it/404/1 "2021-01-15T18:43:01Z")

</div>

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](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`:

 ![Screen Shot 2021-01-15 at 10.36.55 AM](https://us1.discourse-cdn.com/flex020/uploads/builder/original/1X/89bdab0ddb7709fd6028a49b69aec18deaa211fc.png)

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

 ![Screen Shot 2021-01-15 at 10.37.13 AM](https://us1.discourse-cdn.com/flex020/uploads/builder/original/1X/fc05aeb6b4b3fc5b973c102b6d5a5b7dc9fbf871.png)

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.

 ![Screen Shot 2021-01-15 at 10.48.57 AM](https://us1.discourse-cdn.com/flex020/uploads/builder/original/1X/ee21d6e02db68ef4860b62cb367426b96cc4c26f.png)

That’s it!

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

---

<div class="post-metadata">

**Author:** ![pradeep](https://avatars.discourse-cdn.com/v4/letter/p/f0a364/32.png) [@pradeep](https://forum.builder.io/u/pradeep)\
**Post date:** [March 30, 2022, 2:39pm UTC](https://forum.builder.io/t/how-do-i-link-an-image-block-to-an-external-image-without-uploading-it/404/2 "2022-03-30T14:39:26Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![logan](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/logan/32/5564_2.png) [@logan](https://forum.builder.io/u/logan)\
**Post date:** [March 30, 2022, 5:36pm UTC](https://forum.builder.io/t/how-do-i-link-an-image-block-to-an-external-image-without-uploading-it/404/3 "2022-03-30T17:36:27Z")

</div>

Hi @pradeep!

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](https://github.com/BuilderIO/builder/blob/main/packages/react/src/blocks/Image.tsx).

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](https://www.builder.io/blog/drag-drop-react)

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?

---

<div class="post-metadata">

**Author:** ![pradeep](https://avatars.discourse-cdn.com/v4/letter/p/f0a364/32.png) [@pradeep](https://forum.builder.io/u/pradeep)\
**Post date:** [March 31, 2022, 10:37am UTC](https://forum.builder.io/t/how-do-i-link-an-image-block-to-an-external-image-without-uploading-it/404/4 "2022-03-31T10:37:22Z")

</div>

Thanks @logan, I created a custom react component and it is working fine now.
