根据不同的后缀名显示不同的图片

因项目需求，需要根据不同的后缀名显示不同的图片（如果是jpg,png,jpeg等就显示正常的图片地址，如果是word,pdf 就显示对应的图标，前提这些word,pdf等图片在image里存在)

需要先获取后缀名，根据后缀名来判断

     //获取文件后缀
	 let fIndex = url.lastIndexOf(".");
	 let type = url.substr(fIndex+1);

自己定义函数来判端类型

           isImage(type){
				return 
                  ['png','jpg','jpeg','gif','svg'].includes(type.toLowerCase());
			},
			isDocx(type){
				return ['doc','docx'].includes(type.toLowerCase());
			},
			isXsls(type){
				return ['xsls','xsl'].includes(type.toLowerCase());
			},
			isText(type){
				return ['text','txt'].includes(type.toLowerCase());
			},

          isFileType(type){
				if(this.isImage(type)) return 'image';
				if(this.isXsls(type)) return 'excle';
				if(type == 'pfd') return 'pfd';
				if(this.isDocx(type)) return 'word';
				if(this.isText(type)) return "text"
			}

页面中判断

<image v-if="item.fileType == 'image' " :src="item.url" />
<image v-else :src="'/static/image/file/' + item.fileType + '.png'"/>

效果图如下：