图片加载失败及其处理方法(页面图片加载失败解决方案)

一、加载失败原因

1、网络不畅

当用户手机网络不畅，网络信号弱、不稳定、不连通，都有可能导致图片加载失败，这种情况下我们需要对图片进行加载失败的处理，即在图片无法加载时给出一个替代方案，比如显示一张默认的占位图

<img src="http://example.com/missing.png" onerror="this.onerror=null;this.src='http://example.com/default.png';" />

2、图片地址不正确

当图片地址不正确，比如地址拼写错误或者图片已被删除，会导致图片无法正常加载，此时我们应该在控制台输出错误信息、尝试重新请求或者使用默认的占位图来代替该图片

const img = new Image();
img.addEventListener('error', () => {
  console.log('无法加载图片');
  // 显示默认占位图
  img.src = 'default.jpg';
});
img.src = 'notexist.jpg';

3、图片格式不正确

当图片格式不正确时，很可能导致图片无法正常加载，此时我们可以尝试使用一些工具对其进行格式转换，比如将jpg格式转换成png格式

<img src="icon.jpg" type="image/png" />

二、图片加载失败的影响

1、体验下降

当图片无法正常加载时，会导致用户体验下降，影响用户对网站或应用的印象，可能导致用户转移

2、失去用户

当图片加载失败且无法处理时，用户可能放弃使用该应用或网站，从而对产品经营带来负面影响

3、影响SEO

当网站中存在大量无法加载的图片时，搜索引擎会将其作为网站质量下降的标志，从而影响搜索排名

三、如何预防和处理图片加载失败

1、使用合适的图片格式

选择合适的图片格式，比如使用JPG格式、PNG格式、WebP格式等，可以减小图片的体积，提高加载速度，从而避免图片基于网络不畅导致的无法加载错误

2、合理压缩图片

合理压缩图片可以缩小图片体积，在保证图片质量的同时提高加载速度，从而降低图片无法加载的概率

3、对于楼层、商品展示类的图片建议使用懒加载技术

通过懒加载技术，只加载当前可见区域内的图片，减轻网络请求压力，以及减少图片失误率

<img data-src="lazyload.jpg" />

4、对于图片链接错误或者不存在的情况，建议使用默认占位图进行替代，同时在控制台输出错误信息，方便开发人员及时跟踪问题

<img src="notexist.jpg" onerror="this.onerror=null;this.src='default.jpg';console.log('该图片不存在');"/>

5、网络较为不稳定或者经常容易掉线的用户，尽可能地使用低质量的占位图，以免加剧用户网速压力

<img src="loading.gif" />

四、小结

图片是页面和应用中重要的元素，正常的图片加载可以提高用户体验，而图片加载失败，则可能带来用户流失、SEO降权、产品质量下降等一系列负面后果。基于此，我们必须预先考虑图片的加载失败情况，以便于我们及时的发现和修复错误，从而提高用户体验，降低流失率。