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

Question

I am trying to display .tiff files in the browser and am using a JavaScript plugin called UTIF.js.

Note: I know it's a bad idea to display tifs in the browser, but for my particular use case I need to do so.

I am building a single page app using Vue-Cli3 and have a single file component like so (stripped down for this demonstration purpose):

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

In my local test, only the .jpg image is shown (image2.jpg and not image.tiff) beacause I am getting the following error in console:

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

Can someone provide some guidance on how I can successfully show tiff images in the browser? Thanks!

Answer 1

In data you created a variable called images. But you are calling this.image in mounted which is not defined.