How can I find the src of an uploaded image to use in custom code on Webflow?

Published on
September 22, 2023

To find the source (src) of an uploaded image to use in custom code on Webflow, you can follow these steps:

  1. Login to your Webflow account and navigate to the project where the image is uploaded.

  2. Go to the page or element where you want to use the image in your custom code.

  3. Add an image or select the existing image element on the page.

  4. In the right-hand panel, click on the image element to open the settings.

  5. In the Image Settings panel, you will find the "Asset" section, which shows the name and dimensions of the uploaded image.

  6. To get the source (src) of the image, you have a couple of options:

  • Option 1: Right-click on the image element and select "Copy Image Address" or "Copy Image URL." This will copy the direct URL of the image, which you can then use in your custom code.
  • Option 2: If you prefer to use Webflow's image CDN URL, you can click on the "Open in Designer" button at the top of the settings panel. In the Designer view, select the image element again and then use the "Background image" setting in the Style panel. The URL provided in this setting is the CDN URL of the uploaded image.
  1. Once you have copied the source (src) of the image, you can use it in your custom code as needed.

By following these steps, you can easily find the source (src) of an uploaded image in Webflow and utilize it in your custom code for effective website development or customization.

Additional Questions:

  1. How do I link an external CSS file in Webflow?
  2. Can I add custom JavaScript code to my Webflow website?
  3. What are the best practices for optimizing images in Webflow?