Vue and Annotorious: Can not annotate image element

Question

I am using a JavaScript image annotation library called "Annotorious" and for some reason I can not figure out why I can't annotate the image. Does anyone have any idea why? Here's my code and a live sandbox:

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

Sandbox demo: https://codesandbox.io/s/vue-annotorious-issue-c4qfq?file=/src/components/HelloWorld.vue

The official guide for this plugin is here: https://recogito.github.io/annotorious/getting-started/

Note : I had a previous version of this plugin working, but there may have been a breaking change at some recent plugin update...

Answer 1

There was a breaking change. I had to add the CSS link now:

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