微信平台或者企业微信平台打开外部图片失败解决以及优化

先说下我这个打开失败的现象

我有十多张图片，每次打开总是能打开一部分，一部分打不开

打开图片和没打开图片是随机的

初步排除配置问题，那就是需要优化了

1、添加加载动画

不能是白对吧

我用了有赞组件，里面有个懒加载，这里图片我用了循环，index是我循环的key值

<img :src="item.preview" alt="" id="code_img" crossorigin="anonymous" @load="loadImg(index)" />

然后在编写loadImg方法,灵活一点，我这就是一个加载动画，加载的动画我是用svg写的

<div  v-if="item.show" class="loadingPage">
                            <img src="../../assets/svg/loading.svg" class="loading" />
                        </div>

const loadImg = (num ) => {
            data.imgArr[num].show = false;
        };

2、增加预览图

加载动画并不能解决图片显示问题，减少图片大小是问题所在

一张图片如果3M，15张。。啧，45M，那是加载有可能超时

参考线规格公众号图片大小：微信官方后台有尺寸提示，要求的是封面图 360*200，多图文的非首个图文封面是200*200，然后正文内图片规格也是200*200。你用其他袭的尺寸也可以，只要比例接近即可。正文图片没有严格的要求，大小不能超过2M。高度没有太大的要求，但是宽度不能比高度大太多，不zd然压缩很严重，不美观。

好吧，2M都嫌弃太大

我随便从网上找了个在线图片压缩：

在线图片免费压缩网站

简单看下，还可以，果然图片这次显示出来了

<* ------------------------  *>

其他

网上看到一个说法，我没遇到，还是记录下

就是图片格式会影响网页内图片的打开

如果微信或者企业微信环境下，图片如果是webp格式添加属性 webp="true"

<img :src="src" alt="" srcset="" style="height: 100%;" webp="true" />

还有一个

如果图片是oss上的，有个ATS，我只是看到，没有尝试过

ios系统oss图片不显示？ | 微信开放社区

ATS检测网站