Использование монтируемого хука в компоненте «Один файл»: как проверить элементы IMG? - PullRequest
0 голосов
/ 07 января 2019

Я пытаюсь отобразить файлы .tiff в браузере и использую плагин JavaScript с именем UTIF.js .

Примечание. Я знаю, что отображать 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 в браузере? Спасибо!

1 Ответ

0 голосов
/ 08 января 2019

В данных вы создали переменную с именем images. Но вы вызываете this.image в смонтированном виде, который не определен.

...