[Vuejs]-Vue.js: load content into DOM depending on file extension

5 October 2023 by thecoderscamp.com

0👍

✅

If all you have is the filename, then you’ll have to decide between displaying an image or video based on the extension (as you suggested).

Try something like this:

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