Creating a pipe to get the URL of image fields

Image carousel.

I have this one working with sample images on a record details page - https://materializecss.com/carousel.html

I’m looking to use images stored in the record I’m viewing the details for. {Image1}, {Image2}, {Image3}.

I tried using {!!Image1.src}, etc. inside the img tag but that’s not working. Since the value of {!!Image1.src} is //res.cloudinaryxxxxxx, I also tried <img src=“https:{!!Image1.src}”> I’m assuming at this point I just can’t use an image field inside a div element.

Here’s the carousel working with sample images - https://www.loom.com/share/c811a37c742a41b7877327441e40b437