Webflow嵌入代码添加图片及轮播图图片不显示问题排查

问题根源 #

Webflow的网站资源（包括图片）托管在专属CDN上，自定义的本地相对路径（如/images/image1.jpg）无法指向正确的资源位置，必须使用Webflow资产库生成的图片链接。

修复步骤 #

• 打开Webflow编辑器的Assets面板，将你的3张图片上传到资产库
• 上传完成后，右键点击每张图片，选择「Copy link」复制完整的CDN链接
• 替换嵌入代码中所有<img>标签的src属性为对应的CDN链接
• 移除嵌入代码中多余的<head>、<title>和<body>标签（Webflow页面已经包含这些结构，重复添加会导致冲突）

修改后的代码示例 #

<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>

<div class="carousel">
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="https://assets.website-files.com/xxxxxx/image1.jpg" alt="Slide 1">
        </div>
        <div class="carousel-item">
            <img src="https://assets.website-files.com/xxxxxx/image2.jpg" alt="Slide 2">
        </div>
        <div class="carousel-item">
            <img src="https://assets.website-files.com/xxxxxx/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>

额外提示 #

• 每次修改嵌入代码后，记得重新发布网站才能生效
• 如果需要响应式布局，可以把.carousel的width改为100%，适配不同屏幕尺寸

内容的提问来源于stack exchange，提问作者mdot