How to add images in embedded code on Webflow? – Blancer.com Tutorials and projects

I am trying to add a carousel to my website on webflow and I have used to embed code feature. I have added the HTML, CSS and JavaScript all together because I’m not sure how to do that on seperate files in Webflow. I have also added 3 images to the carousel but when i publish the website and view it, the functionality of the carousel works but does not show the images. I have put down the path as: images/image1.jpg as that is what is used for other images.

<head>
    <meta charset="UTF-8">
    <title>Simple Image Carousel</title>
    <style>
        .carousel {
            position: relative;
            width: 600px;
            margin: auto;
            overflow: hidden;
            border: 1px solid #ddd;
        }

        .carousel-inner {
            display: flex;
            transition: transform 0.5s ease-in-out;
        }

        .carousel-item {
            min-width: 100%;
            box-sizing: border-box;
        }

        .carousel-item img {
            width: 100%;
            display: block;
        }

        .carousel-control {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background-color: rgba(0,0,0,0.5);
            border: none;
            color: white;
            font-size: 2em;
            padding: 5px 10px;
            cursor: pointer;
            user-select: none;
        }

        .carousel-control.prev {
            left: 10px;
        }

        .carousel-control.next {
            right: 10px;
        }
    </style>
</head>
<body>

<div class="carousel">
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="images/image1.jpg" alt="Slide 1">
        </div>
        <div class="carousel-item">
            <img src="images/image2.jpg" alt="Slide 2">
        </div>
        <div class="carousel-item">
            <img src="images/image3.jpg" alt="Slide 3">
        </div>
    </div>
    <button class="carousel-control prev" onclick="prevSlide()">&#10094;</button>
    <button class="carousel-control next" onclick="nextSlide()">&#10095;</button>
</div>

<script>
    let currentIndex = 0;
    const items = document.querySelectorAll('.carousel-item');
    const totalItems = items.length;

    function updateCarousel() {
        items.forEach((item, index) => {
            item.classList.remove('active');
            if (index === currentIndex) {
                item.classList.add('active');
            }
        });
        const carouselInner = document.querySelector('.carousel-inner');
        carouselInner.style.transform = 'translateX(-' + (currentIndex * 100) + '%)';
    }

    function nextSlide() {
        currentIndex = (currentIndex + 1) % totalItems;
        updateCarousel();
    }

    function prevSlide() {
        currentIndex = (currentIndex - 1 + totalItems) % totalItems;
        updateCarousel();
    }
</script>
</body>

I have put down the path as: images/image1.jpg as that is what is used for other images.