1、我遇到的使用场景
就是在一个轮播图功能中,可能是视频链接也可能是图片链接,但是都需要在轮播图中展示;
2、解决方法如下
主要是使用正则表达式来判断是否是图片,核心代码v-if="/\w.(png|jpg|jpeg|svg|webp|gif|bmp)$/i.test(item.url)"
,然后使用v-if和v-else来决定是使用 <img>
标签还是 <video>
标签。
<el-carousel :interval="3000" arrow="always">
<el-carousel-item v-for="(item,index) in contentData.uploadImg" :key="index">
<img class="banner_left_image" v-if="/\w.(png|jpg|jpeg|svg|webp|gif|bmp)$/i.test(item.url)" :src="item.url" alt srcset />
<video v-else :src="item.url" controls></video>
</el-carousel-item>
</el-carousel>