Vue.js: загрузка содержимого в DOM в зависимости от расширения файла

Question

В прошлом я загружал несколько текстовых и мультимедийных данных из объекта в DOM через Vue.js. НО иногда у меня есть изображения, а иногда и видео. Поэтому я строю что-то вроде следующего:

<img id="example-image" :src="item.media" :alt="item.image + 'example pic'" @error="loadVideo()">
<video id="example-video">
<source :src="item.media" type="video/mp4">
</video>

Так что, если статья содержит изображение - оно показывает изображение. Как только это видео вместо этого (которое, конечно, не загружается в тег IMG), оно загружает метод, который скрывает изображение и вместо этого показывает видео.

К сожалению, это не лучшая практика (работает безупречно в Chrome, но в Safari не будет отображаться, пока не будет загружен на клиент на 100% - пока трафик)

Поэтому я подумал, можно ли проверить расширение файла с помощью метода и, в зависимости от этого, загрузить содержимое с правильным HTML-тегом. (что-то вроде

getFileExtension(filename) {
return filename.slice((filename.lastIndexOf(".") - 1 >>> 0) + 2);
}

Но, может быть, у кого-то из вас есть идея получше? Спасибо, тонны.

Answer 1

Если все, что у вас есть, это имя файла, то вам придется выбирать между отображением изображения или видео на основе расширения (как вы предложили).

Попробуйте что-то вроде этого:

<video v-if="isVideo(item.media)">
  <source :src="item.media" type="video/mp4">
</video>
<img v-else :src="item.media">

methods: {
  isVideo(filename) {
    return /\.mp4$/i.test(filename)
  }
}