在单个文件组件中使用 Mounted 挂钩：如何检查 IMG 元素？

Question

我正在尝试在浏览器中显示 .tiff 文件并使用名为 UTIF.js 的 JavaScript 插件。

注意：我知道在浏览器中显示 tif 是个坏主意，但对于我的特定用例，我需要这样做。

我正在使用 Vue-Cli3 构建一个单页应用程序，并且有一个像这样的单文件组件（为了演示目的而被删除）：

    <template>
    <div>

            <div v-for='(image,index) in images' :key='index'>
                    <img :src='image'>
            </div>
    </div>
</template>

<script>
import 'utif/UTIF.js';

export default {
  name: 'ImageReference',
  data: function() {
    return {
      images: ['image2.jpg', 'image.tiff'] <--my test images
    };
  },
  mounted: function() {
    this.image.replaceIMG(); <--- this is a method from the UTIF.js plugin
  }
};
</script>

在我的本地测试中，仅显示 .jpg 图像（image2.jpg 而不是 image.tiff），因为我在控制台中收到以下错误：

Error in mounted hook: "TypeError: Cannot read property 'replaceIMG' of undefined"

有人可以就如何在浏览器中成功显示 tiff 图像提供一些指导吗？谢谢！

Answer 1

您在数据中创建了一个名为 images 的变量。但是你在未定义的 mounted 中调用 this.image。

在单个文件组件中使用 Mounted 挂钩：如何检查 IMG 元素？

Using Mounted hook in a Single file component: How to check IMG elements?

vuejs2

vue-cli-3