Блог

Главная - Вопросы по программированию - Vue и аннотации: не удается аннотировать элемент изображения

Vue и аннотации: не удается аннотировать элемент изображения

#javascript #vuejs2 #annotorious

#javascript #vuejs2 #аннотированный

Вопрос:

Я использую библиотеку аннотаций изображений JavaScript под названием «Annotorious», и по какой-то причине я не могу понять, почему я не могу аннотировать изображение. У кого-нибудь есть идеи, почему? Вот мой код и живая песочница:

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

Примечание: у меня работала предыдущая версия этого плагина, но, возможно, в каком-то недавнем обновлении плагина произошли серьезные изменения…

Ответ №1:

Произошло критическое изменение. Теперь мне пришлось добавить ссылку CSS:

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