Vue中Vis Timeline带图片的时间线项错位问题求助

问题背景 #

我正在Vue应用中集成Vis Timeline，基于官方自定义样式示例进行适配（后续将做样式定制），当前实现代码如下（暂略CSS代码）：

<template>
    <span id="visualization">
    </span>
</template>

<script>
import { Timeline } from "vis-timeline/peer";
import "vis-timeline/styles/vis-timeline-graph2d.css";

export default {
    name: 'VisTimelineChronik',
    data() {
        return {
            itemset: [
                {start: new Date(2010,7,23), content: '<div>Conversation</div><img src="'+require("@/assets/fullscreen.svg")+'" style="width:32px; height:32px;">'},
                {start: new Date(2010,7,23,23,0,0), content: '<div>Mail from boss</div><img src="'+require("@/assets/fullscreen.svg")+'" style="width:32px; height:32px;">'},
                {start: new Date(2010,7,24,16,0,0), content: 'Report'},
                {start: new Date(2010,7,26), end: new Date(2010,8,2), content: 'Traject A'},
                {start: new Date(2010,7,28), content: '<div>Memo</div><img src="'+require("@/assets/fullscreen.svg")+'" style="width:48px; height:48px;">'},
                {start: new Date(2010,7,29), content: '<div>Phone call</div><img src="'+require("@/assets/fullscreen.svg")+'" style="width:32px; height:32px;">'},
                {start: new Date(2010,7,31), end: new Date(2010,8,3), content: 'Traject B'},
                {start: new Date(2010,8,4,12,0,0), content: '<div>Report</div><img src="'+require("@/assets/fullscreen.svg")+'" style="width:32px; height:32px;">'}
            ],
            options: {
                editable: false,
                margin: {
                    item: 20,
                    axis: 40,
                }
            }
        }
    },
    mounted() {
        const container = document.getElementById("visualization");
        const timeline = new Timeline(container, this.itemset, this.options);
    }
}
</script>

问题现象 #

将图片源替换为Vue本地资源后，图片可正常显示，但时间线项出现错位：

使用vue serve启动开发服务器时，修改代码触发热重载后错位消失，但浏览器刷新页面后问题再次出现；选中错位项向上拖拽可修正位置，时间线也会按需增加垂直尺寸。

版本信息 #

+-- @vue/cli-plugin-babel@5.0.8
+-- @vue/cli-plugin-router@5.0.8
+-- @vue/cli-plugin-vuex@5.0.8
+-- @vue/cli-service@5.0.8
+-- vue-router@4.1.5
+-- vue-select@4.0.0-beta.5
+-- vue@3.2.39
`-- vuex@4.0.2
+-- vis-timeline@7.7.2

原因分析 #

错位核心原因是Vis Timeline初始化时，本地图片尚未加载完成：

• Timeline初始化会根据当前DOM内容计算每个项的高度，此时图片还没加载，浏览器用默认占位高度计算布局；
• 图片加载完成后实际高度变化，但Timeline没有自动重新计算布局，导致项位置偏移；
• 热重载时图片已被浏览器缓存，加载速度快，Timeline初始化时能拿到正确的图片高度，所以布局正常。

解决方法 #

方法1：预加载图片后再初始化Timeline #

先加载所有时间线项中的图片，确保图片加载完成后再创建Timeline实例：

<script>
import { Timeline } from "vis-timeline/peer";
import "vis-timeline/styles/vis-timeline-graph2d.css";

export default {
    name: 'VisTimelineChronik',
    data() {
        return {
            itemset: [...], // 保留原itemset内容
            options: {...}, // 保留原options内容
            timeline: null
        }
    },
    async mounted() {
        // 提取所有item中的图片URL
        const imageUrls = this.itemset
            .map(item => item.content.match(/src="([^"]+)"/))
            .filter(match => match)
            .map(match => match[1]);
        
        // 预加载所有图片
        await Promise.all(imageUrls.map(url => {
            return new Promise(resolve => {
                const img = new Image();
                img.src = url;
                img.onload = resolve;
                img.onerror = resolve; // 加载失败也继续初始化
            });
        }));

        // 图片加载完成后初始化Timeline
        const container = document.getElementById("visualization");
        this.timeline = new Timeline(container, this.itemset, this.options);
    }
}
</script>

方法2：初始化后监听图片加载，完成后重绘Timeline #

如果无法提前预加载图片，可以在Timeline初始化后，监听所有图片的加载状态，完成后调用redraw()方法重新计算布局：

<script>
import { Timeline } from "vis-timeline/peer";
import "vis-timeline/styles/vis-timeline-graph2d.css";

export default {
    name: 'VisTimelineChronik',
    data() {
        return {
            itemset: [...], // 保留原itemset内容
            options: {...}, // 保留原options内容
            timeline: null
        }
    },
    mounted() {
        const container = document.getElementById("visualization");
        this.timeline = new Timeline(container, this.itemset, this.options);
        
        // 监听容器内所有图片的加载状态
        const images = container.querySelectorAll('img');
        let loadedCount = 0;

        images.forEach(img => {
            if (img.complete) {
                loadedCount++;
            } else {
                img.onload = () => {
                    loadedCount++;
                    if (loadedCount === images.length) {
                        this.timeline.redraw(); // 所有图片加载完成后重绘
                    }
                };
            }
        });

        // 处理所有图片已加载的情况
        if (loadedCount === images.length) {
            this.timeline.redraw();
        }
    }
}
</script>

方法3：给图片设置固定高度 #

直接在图片标签中明确指定高度（你已设置height属性，确保值准确即可），让Timeline初始化时就能获取到正确的高度，避免占位高度导致的布局错误：

<img src="..." style="width:32px; height:32px;">

这种方法最简单，但如果图片尺寸需要动态调整则不适用。

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