<template><d2-container><h3>image加載失敗使用默認圖片</h3><img src=""alt="test1.png":onerror="errorImg" /><hr><h3>el-image懶加載、大圖預覽、加載占位、加載失敗、</h3><div class="demo-image-error"><div class="block"><span class="demonstration">默認</span><el-image :src="url":preview-src-list="srcList"lazy></el-image><!-- 可通過lazy開啟懶加載功能，當圖片滾動到可視范圍內才會加載 --></div><div class="block"><span class="demonstration">自定義</span><el-image src=""><div slot="placeholder">加載中<span class="dot">...</span></div><div slot="error"><i class="el-icon-picture-outline"></i>加載失敗</div></el-image></div></div></d2-container> </template><style lang="scss" scoped> img {width: 300px;height: 100px; } .demo-image-error {.block {display: inline-block;width: 200px;height: 250px;text-align: center;> span {display: block;width: 100%;}.el-image {width: 200px;height: 200px;line-height: 200px;border: 1px solid lightgray;}} } </style><script> import errorPhoto from '@/assets/img/sbpmt1.png' export default {data () {return {url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',errorImg: 'this.src="' + errorPhoto + '"',srcList: ['https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg','https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg']}} } </script>

?

總結

以上是生活随笔為你收集整理的vue图片加载失败使用默认图片，el-image支持懒加载，自定义占位、加载失败等的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。