1、最近有个需求，上传图片时，后台会进行对图片压缩处理，生成一个缩略图，前端这边图片展示时显示缩略图路径，代码如下：

<div  v-if="val.type == '图文'" class="item_center">
                        <img
                            :src="val.image | getfirstImage"
                            alt=""
                            srcset=""
                        />
                        <p class="title_p">
                            <i class="el-icon-picture-outline" />
                            <span>{{getChangeContent(val.content)}}</span>

                        </p>

                    </div>

2、在vue中filters方法进行过滤缩略图路径：

getfirstImage(val) {
            let strSubTxt = ""
            // console.log(val,'原图路径')
            let Txt_img = val.slice(0)
            let regPathParse=/^([^\\^\/]+[\\\/]+|\\\\[^\\]+)(.+[\\\\\\\/])([\w\W]*)(.jpg|.png|.gif)$/
            if(regPathParse.test(Txt_img)){
            strSubTxt=RegExp.$3
            }
            let strTxt= Txt_img.replace(strSubTxt,'t_'+ strSubTxt)
            // console.log(strTxt,'缩略图');
            var arr = strTxt.split(",");
            return arr[0];
        },