javascript - Vue 和 Annotorious：无法注释图像元素

Question

我正在使用一个名为“Annotorious”的 JavaScript 图像注释库，由于某种原因，我无法弄清楚为什么我不能注释图像。有谁知道为什么？这是我的代码和实时沙箱：

<template>
  <div class="hello">
    <img id="dog" src="https://picsum.photos/id/237/200/300.jpg" />
  </div>
</template>

<script>
import { Annotorious } from "@recogito/annotorious";
export default {
  name: "HelloWorld",
  data() {
    return {
      anno: {},
    };
  },
  mounted() {
    this.anno = new Annotorious({
      image: document.getElementById("dog"),
    });
  },
};
</script>

沙盒演示：https ://codesandbox.io/s/vue-annotorious-issue-c4qfq?file=/src/components/HelloWorld.vue

这个插件的官方指南在这里：https ://recogito.github.io/annotorious/getting-started/

注意：我有这个插件的早期版本工作，但在最近的一些插件更新中可能有一个重大变化......

Answer 1

发生了重大变化。我现在必须添加 CSS 链接：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@recogito/annotorious@2.1.2/dist/annotorious.min.css">