Question

过去，我通过Vue.js将多个文本和媒体数据从一个对象加载到DOM中。但是有时我有图像，有时有视频。因此，我将构建以下内容：

<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％下载-byebye流量，它才会显示出来）

因此，我想如果可以的话，可以用一种方法检查文件扩展名，并根据该方法以适当的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)
  }
}

Vue.js：根据文件扩展名将内容加载到DOM中

1 个答案: