如果url后面都有后缀的话,可以获取到url的后缀,然后根据后缀来判断显示不通的图标
核心代码
let url = 'xxx.jpg'
// 获取后缀
let suffix = this.src.substr(this.src.lastIndexOf('.') + 1)
// suffix => .jpg
简要demo(以vue组件为例)
<template>
<div class="media">
<img v-if="type=='picture'" :src="src" alt="">
<img v-if="type=='file'" src="@/assets/file.png" alt="">
<video v-if="type=='video'" :src="src" alt=""></video>
<audio v-if="type=='audio'" :src="src" alt=""></audio>
</div>
</template>
<script>
export default {
props: {
src: String
},
computed: {
type() {
let type = 'file'
if (!this.src) return type
let suffix = this.src.substr(this.src.lastIndexOf('.') + 1)
switch (suffix.toLowerCase()) {
// 图片
case 'jpg':
case 'jpeg':
case 'gif':
case 'png':
case 'webp':
type = 'picture'
break
// 视频
case 'mp4':
case 'mpeg4':
case 'flv':
case 'avi':
type = 'video'
break
// 音频
case 'mp3':
type = 'audio'
break
// 其它文件
default:
type = 'file'
}
return suffix
}
}
}
</script>
<style lang="scss" scoped>
.media {
display: flex;
align-items: center;
justify-content: center;
width: 15vw;
height: 8vw;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
</style>