0

在我的 Vue 应用程序中，我有一个带有绑定 src 的图像元素。此代码在步进器中。在一个步骤中，用户选择要上传的图片，然后在下一步中显示图片（按预期工作）。但是，我试图在下一步（Taggd 库）中对元素启动一个库，但该元素似乎未定义。

我尝试了 nextTick() 等待图像加载但没有运气。

图像元素：

<div class="orientation-landscape">
    <div class="justify-center q-px-lg">
        <img v-if="photo.url" :src="photo.url" id="workingPhoto"
        style="width: 80vw;" ref="workingPhoto"/>
    </div>
</div>

功能。我首先使用uploadFile设置图片元素的url，然后进入下一步加载图片。然后我在 nextTick 上调用 initTaggd() 但是由于元素未定义而失败。

uploadFile(file) {
  const self = this;
  self.photo.file = file;
  self.setPhotoUrl(file);
  self.$refs.stepper2.next();
  console.log('We should be at next step now. doing the init');
  self.nextTick(self.initTaggd());
},

setPhotoUrl(file) {
  const self = this;
  self.photo.url = URL.createObjectURL(file);
  console.log('ping1');
},

initTaggd() {
  const self = this;
  const image = document.getElementById('workingPhoto');
  console.log('image:', image);     //THIS RETURNS UNDEFINED
  console.log('Trying ANOTHER element by refs:', self.$refs.stepper2);     // This returns the element
  console.log('trying the real element by reference', self.$refs.workingPhoto);     // Returns undefined again
  const taggd = new Taggd(image);      //All this here fails because image is undefined.
  console.log('ping2.5');
  taggd.setTags([
    self.createTag(),
    self.createTag(),
    self.createTag(),
  ]);
  console.log('ping3');
},

我想我正在寻找一种在调用 initTaggd() 之前等待图像完全加载的方法，但我不知道如何实现这一点。

4

1 回答 1

1

您可以收听该load事件：

<img 
    v-if="photo.url" 
    id="workingPhoto"
    ref="workingPhoto"
    :src="photo.url"
    style="width: 80vw;" 
    @load="initTaggd"
/>
于 2019-01-21T14:34:16.657 回答