开发过程中经常需要和图片处理打交道，看了网上很多有关图片处理的方法，都是讲解得一知半解，没有比较全面的总结。下面，将简单总结一个我们通过vue去处理img标签过程中，图片加载时，与图片加载失败时的处理方法。
1.常见的一个图片的处理流程，当接收到图片时，若图片较大，或者网络较慢的情况，图片还未加载完成，此时需要显示一个正在加载中的图片提示用户图片正在加载中。当图片加载或读取完毕时我们才替换需要显示图片显示到标签上。主要用的是img标签中的onload方法进行处理,代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="box"> <img :src="loadImgSrc" :onload="onLoadImg(testImgSrc)"> </div> </body> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> new Vue({ el: '#box', data: { testImgSrc: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic2.zhimg.com%2F50%2Fv2-193cbb243dc14d3a016caaa54ba02837_hd.jpg&refer=http%3A%2F%2Fpic2.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1625726941&t=178316371a5e946d6b424ceb789595d6", //最终要加载的图片 loadImgSrc: "/themes/default/demo/public/assets/images/loadinggif.gif", //加载中要显示的图片 }, methods: { onLoadImg: function(imgSrc) { //加载完成时触发 console.log("onload", imgSrc) return 'this.src='+'"'+imgSrc+'";this.οnlοad=null'; }, } }); </script> </html>
到此，我们完成了一个图片加载过程中，到加载完成时的一个处理流程。在图片未完全加载成功时显示loading提示图，当图片完全从服务器端down完成后替换显示。
2.上面我们处理了图片正常加载中的处理过程，接下来就是处理图片的异常情况。当我们从服务器中读取一张图片的时候，除了上述的情况外，还有另外一种就是图片链接丢失，或者本地网络过慢无法加载图片的情况。所以我们要在处理的情况中捕捉异常的情况，显示错误状态下的图片，提示用户图片加载失败。这里我们用到的是onerrror的方法，代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="box"> <img :src="loadImgSrc" :onload="onLoadImg(testImgSrc)" :onerror="onErrorImg(errorImgSrc)"> </div> </body> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> new Vue({ el: '#box', data: { errorImgSrc: "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1917562744,2542638399&fm=26&gp=0.jpg", //图片加载失败时的图片 testImgSrc: "https://gimg2.baidu.com/image_search/", //要加载的图片，此处链接随便填用作演示图片加载失败的情况 loadImgSrc: "/themes/default/demo/public/assets/images/loadinggif.gif", //加载中要显示的图片 }, methods: { onLoadImg: function(imgSrc) { console.log("onload", imgSrc) return 'this.src='+'"'+imgSrc+'";this.οnlοad=null'; }, onErrorImg: function(imgSrc){ console.log("onload", imgSrc) return 'this.οnerrοr=null;this.src='+'"'+imgSrc+'";'; }, } }); </script> </html>
到此，图片常见的加载中，加载失败时的处理方法就基本实现了，希望对你有所帮助，
本文来自博客园，作者：喆星高照，转载请注明原文链接：https://www.cnblogs.com/houxianzhou/p/15632268.html
支付宝扫一扫
微信扫一扫
