Externally load images in Webflow

[TommyNZ (Tom King)]

Hey there!

I have a client who is wanting to externally load images into their site using their DAM platform (Digital Asset Management), as this makes it easier for them to manage the images.

I’m wondering if anyone has a solution that is similar to this one I found on the forum here using unveil.js

The only issue with that solution, is that the image in Webflow can’t already be pre-populated, it has to be an “empty image”.

I’m hoping to be able to have images set in Webflow, then they get overridden if the data-src attribute is set on the image once loaded.

With the idea being that the not all images will be loaded in via the DAM and it makes it easy for the client to see a visual representation, even if the image is being loaded externally. (I know this isn’t best practice for loading speeds etc, but this is a purely internal/informational site for a few select users)

Responsiveness isn’t too much of an issue (in terms of loading small res images on mobile) as this is for an internal style guide site, viewed 95% on a computer screen!

Any ideas is appreciated here. I hope this made sense!

Read Only Link for context.

Staging Site for the read only link

[TommyNZ (Tom King)]

Ah I’ve just solved it.

In the image settings, you need to tick “Disable responsiveness” and then this code works perfectly, even with preset images. Not ideal for load times of course, but ideal in this situation.

[Pablo_Cortes]

Hello @TommyNZ, you can also do this with the custom element, just place a custom element into your container change the html tag to img and add the attribute src with the link of your image, and it would show in the designer.