如何将动态<img> id绑定到JavaScript事件？

Question

我正在学习如何使用一个名为阿诺的Javascript图像注释库。我想将它集成到Vue应用程序中，如果我这样做的话，它工作得很好：

<img :src="photo.url" id="dog" :alt="photo.title" />

但是，如果我这样做，就会得到一个控制台错误：

<img :src="photo.url" :id="photo.id" :alt="photo.title" />

我为证监会的完整代码命名为PhotoDetail.vue：码箱链接

<template>
  <div>
    <h1>Test Photo</h1>
    <img :src="photo.url" :id="photo.id" :alt="photo.title" />
  </div>
</template>

<script>
import { Annotorious } from '@recogito/annotorious'
export default {
  name: 'photoDetail',
  data() {
    return {
      photo: {}
    }
  },
  methods: {
    async getPhoto() {
      this.photo.url = await 'https://picsum.photos/id/237/400/'
      this.photo.id = 'dog'
      this.photo.title = 'nice dog'
    },
    annotatePhoto() {
      try {
        const anno = new Annotorious({
          image: this.photo.id // image element or ID
        })
        // Attach listeners to handle annotation events
        anno.on('createAnnotation', function(annotation) {
          console.log('Created!', annotation)
        })
      } catch (error) {
        console.log('anno error', error)
      }
    }
  },
  async created() {
    await this.getPhoto()
  },
  mounted() {
    this.annotatePhoto()
  }
}
</script>

控制台错误：

anno error TypeError: Cannot read property 'nodeType' of undefined
    at new e (annotorious.min.js:1)
    at VueComponent.annotatePhoto (cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/PhotoDetail.vue?vue&type=script&lang=js&:51)
    at VueComponent.mounted (cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/PhotoDetail.vue?vue&type=script&lang=js&:84)
    at invokeWithErrorHandling (vue.runtime.esm.js:1853)
    at callHook (vue.runtime.esm.js:4213)
    at Object.insert (vue.runtime.esm.js:3136)
    at invokeInsertHook (vue.runtime.esm.js:6336)
    at VueComponent.patch [as __patch__] (vue.runtime.esm.js:6555)
    at VueComponent.Vue._update (vue.runtime.esm.js:3942)
    at VueComponent.updateComponent (vue.runtime.esm.js:4060)

有什么建议吗？谢谢!

Answer 1

首先，您需要确保在调用img函数之前呈现annotatePhoto组件。也就是说，在getPhoto函数之后：

async mounted() {
  await this.getPhoto()
  this.annotatePhoto()
}

您还需要像这样更改更新photo变量的方式，否则DOM不会更新：

this.photo = {
  url: await 'https://picsum.photos/id/237/400/',
  id: 'dog',
  title: 'nice dog',
}

工作示例：沙盒