列表数据中图片优化，减少白屏，卡顿

问题分析

渲染数据页面，需要加载图片（300kb左右）。那么就容易造成

• 初始化非常多图片时，内存消耗很高
• 卡顿、白屏

解决问题

• 使用图片缩略图，每张图片最多30k不到，少的1k

范例：
   <img
    :src="{'source':scope.row.source,'url':scope.row.images[0]} | changeImgSizeFilter"
    alt=""
    width="56px"
    height="56px"
    style="border-radius: 4px; margin-right: 5px"
  >

main.js 
/**

* 链接分析

* @param {source:'平台code'

* url:'图片地址'

* width:'设置图片大小'

* value 对象
} 

*/

Vue.filter('changeImgSizeFilter', function (value) {

    let source = Number(value.source)

    let url = value.url

    if(!url){
        return '#'
    }
    if(/xxx.com/g.test(url)){//对某平台url特判
        return url
    }

    let resUrl = ''

    let width = value.width || 60
    
    switch (source){

        case 1: //拼多多

        case 7:

            resUrl = url + '?imageView2/2/w/'+width+'/q/80/format/webp'

        break

        case 2: //淘宝

        case 3:

            resUrl = url + '_'+width+'x'+width+'.jpg'

        break

        case 5:

        case 8: //1688

            if(url.indexOf('.search.jpg')>-1){
                resUrl = url.replace('.search.jpg','.'+width+'x'+width+'.jpg')
            }else{
            let mm = url.split('.jpg')
                resUrl = mm&&mm[0]?mm[0] + '.'+width+'x'+width+'.jpg':url
            }

        break

        case 4: //京东

        case 10: //京喜

            if(/\/s\d{1,}x\d{1,}_jfs\//g.test(url)){
                resUrl = url.replace(/\/s\d{1,}x\d{1,}_jfs\//g,'/s'+width+'x'+width+'_jfs/')
            }else{
                resUrl = url.replace('popWaterMark','n5')
            }

        break

        default:

        break

    }

    return resUrl || url

})