正则表达式判断是否是图片链接

1,063 阅读1分钟

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>