Vue picture processing error

PC project in a Vue, it is required to not let it show the wrong picture ugly picture, it is necessary to write the default picture after picture of a failure,

 Here are two ways to write,

The first method, that is, Baidu up to code, is to give a picture a default value.

 

The second question, if the page has a lot of places there is this thing, then write it right is very troublesome in different pages.

Use it to VUe instruction.

Here is divided into two cases, one is directly loaded default images, such as image loading reusable loaded after the completion of the picture .

code show as below

1  // If the custom instruction multiple words, and then re-open a file written specifically defined instructions too messy 
2  // global register custom instructions for determining whether the current picture can be loaded successfully, you can load the success of the assigned img src attribute, otherwise the default image 
3  // instruction name: Real-IMG 
. 4  // processing method of the generic error image, or may look lazy loading 
. 5 Vue.directive ( 'Real-IMG', the async function (EL, Binding) {
 . 6    the let imgUrl = binding.value; // get image address 
. 7    IF (imgUrl) {
 . 8      the let exist = the await imageIsExist (imgUrl);
 . 9      IF (exist) {
 10        el.setAttribute ( 'the src' , imgUrl);
 11      }
 12    }
 13 });
 14  
15  / * *
 16  * detecting whether an image exists
 . 17  * @param URL
 18 is  * / 
. 19 the let imageIsExist = function (URL) {
 20 is    return  new new Promise ((Resolve) => {
 21 is      var IMG = new new Image () ;
 22 is      img.onload = function () {
 23 is        IF ( the this .complete == to true ) {
 24          the console.log ( 'resource load' );
 25          Resolve ( to true );
 26 is         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 };

Use

1 <div class="appd_d_ch_logo">
2 　　<img src="../../assets/img/error/app_d.png" v-real-img="appDetail.icon" alt="">
3 </div>

 

 

The second picture is loaded directly, until the time failed to load using the default map.

1  / * *
 2  * detecting whether an image exists
 . 3  * @param URL
 . 4  * / 
. 5 the let imageIsExist = function (URL) {
 . 6    return  new new Promise ((Resolve) => {
 . 7      var IMG = new new Image ();
 . 8      IMG. = the onload function () {
 . 9        IF ( the this .complete == to true ) {
 10          the console.log ( 'resource load' );
 . 11          Resolve ( to true );
 12 is          IMG = null;
 13 is        }
 14      }
 15      img.onerror = function () {
 16        the console.log ( 'Resource error' , IMG);
 . 17        Resolve ( to false );
 18 is        IMG = null ;
 . 19      }
 20 is      img.src = URL;
 21 is    })
 22  };
 23 is  
24  
25  
26 is  // applied alone to the application management module 
27  // pass the wrong picture 
28 Vue.directive ( 'ERR-IMG', the 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 file used as follows

1 <div class="appd_d_ch_logo">
2      <img src="../../assets/img/error/app_d.png" v-real-img="appDetail.icon" alt="">
3 </div>

 

A long time to learn a few new things still feel very happy, Vue instruction many people have seen, but to use the time did not always think, Baidu still see a little bit of renovation.

A js code does not need to introduce the use of very easy to do in all of your pages, you can put a js code into Vue.prototype above.

Before been thinking about this question, what way can make all of the code can be used for a function or something, see the instructions, still have to look at the document, only the time to use it may be thought that he had seen such passage, re-look at the document uses.

 

If my articles to help you, I will be very happy.