一种是直接加载默认图片,等图片加载完成之后再使用加载完成的图片。
代码如下
使用方式
1 <div class="appd_d_ch_logo">
2 <img src="../../assets/img/error/app_d.png" v-real-img="appDetail.icon" alt="">
3 </div>
------------------------------------1 // 如果自定义指令多的话,再重新开启一个文件专门写自定义指令 太乱了
2 //全局注册自定义指令,用于判断当前图片是否能够加载成功,可以加载成功则赋值为img的src属性,否则使用默认图片
3 //指令名称为:real-img
4 // 通用错误图片的处理方法,或者也可以懒加载的样子
5 Vue.directive('real-img', async function (el, binding) {
6 let imgURL = binding.value;//获取图片地址
7 if (imgURL) {
8 let exist = await imageIsExist(imgURL);
9 if (exist) {
10 el.setAttribute('src', imgURL);
11 }
12 }
13 });
14
15 /**
16 * 检测图片是否存在
17 * @param url
18 */
19 let imageIsExist = function (url) {
20 return new Promise((resolve) => {
21 var img = new Image();
22 img.onload = function () {
23 if (this.complete == true) {
24 console.log('资源加载');
25 resolve(true);
26 img = null;
27 }
28 }
29 img.onerror = function () {
30 console.log('资源error', img);
31 resolve(false);
32 img = null;
33 }
34 img.src = url;
35 })
36 };
1 /**
2 * 检测图片是否存在
3 * @param url
4 */
5 let imageIsExist = function (url) {
6 return new Promise((resolve) => {
7 var img = new Image();
8 img.onload = function () {
9 if (this.complete == true) {
10 console.log('资源加载');
11 resolve(true);
12 img = null;
13 }
14 }
15 img.onerror = function () {
16 console.log('资源error', img);
17 resolve(false);
18 img = null;
19 }
20 img.src = url;
21 })
22 };
23
24
25
26 // 单独作用于应用模块的管理
27 // 传的是错误的图片
28 Vue.directive('err-img', async function (el, binding) {
29 let imgURL = binding.value;//获取图片地址
30 let realURL = el.src;
31 if (imgURL) {
32 let exist = await imageIsExist(realURL);
33 if (!exist) {
34 el.setAttribute('src', imgURL);
35 }
36 }
37 });
Vue文件中使用方式如下
1 <div class="appd_d_ch_logo">2 <img src="../../assets/img/error/app_d.png" v-real-img="appDetail.icon" alt="">3 </div>