annotorious | A JavaScript library for image annotation | Data Labeling library

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:

What is the correct way to use a third party plugin with Nuxt? I consulted the Nuxt plugin documentation, but it is not working for me.

Let me explain:

I am trying to use a JavaScript image annotation library called Annotorious and the Annotorious docs state to use the plugin like so:

I am learning how to use a Javascript image annotation library called Annotorious. I want to integrate it into a Vue app and it works fine if I do this:

However, I am getting a console error if I do it like so:

My full code for the SFC named PhotoDetail.vue: Codesandbox link

This is the angualrapp what i written in angular4, I just got image annotation in angular1.x the link below. I converted it into angular4(typescript) This is image annotation code which is in angular1.x

I am following the GraphQL Prisma Typescript example provided by Prisma and created a simple data model, generated the code for the Prisma client and resolvers, etc.

My data model includes the following nodes:

I want to store the annotations generated on the image in the database. I have used Annotorious API for generating the annotation. The API says that:

Some versions of Annotorious conflict with jQuery. When using Annotorious and jQuery on the same page, you should put jQuery into no-conflict mode, and either assign a new variable name to jQuery's $ alias or, alternatively, wrap your jQuery code into a function where you can use the $ alias in the local scope,

like so:

With my below angular1.x script code for image annotation I have searched for a solution to solve my conversion error but I didn't get many equalents of angular1.x code in angular4. The error is a runtime error for angular1.x when I try to convert into Angular4. See below.

For $inject I use @inject but it is quite difficult to use it in my code for converting angular 1.x image annotation to angular4 image annotation.

I'm trying to send a js object to the backend using AJAX when a button click occurs, but it seems that the button click isn't working. I'm fairly new to JS and was wondering if someone could spot what is going wrong.

I am trying to implement Annotorious Openlayers example in my web page. I am able to get the map properly but no image is getting loaded in it. I have never used Openlayers before.

The default code is: