vue中img标签图片 加载时 与 加载失败 的处理方法
生活随笔
收集整理的這篇文章主要介紹了
vue中img标签图片 加载时 与 加载失败 的处理方法
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
開發過程中經常需要和圖片處理打交道，看了網上很多有關圖片處理的方法，都是講解得一知半解，沒有比較全面的總結。下面，將簡單總結一個我們通過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
總結
以上是生活随笔為你收集整理的vue中img标签图片 加载时 与 加载失败 的处理方法的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： alias中后面的命令不执行的问题(没有
- 下一篇： 启动器中图标的默认路径