At present, there is a problem in the project, sometimes the background will give the image path 404, the original solution is to add an onError to redirect the address to a 404 local default address. The problem is that if the default address is 404, it will cause infinite loading

Since the project is developed using vUE, there is a once modifier in VUE, so let’s try this first

It looks like it works, and there’s no loop call, but it doesn’t! There are too many onErrors in the project. It is too troublesome to replace the positions one by one. Let’s try to encapsulate it with a method.

Register the global method in main (the prototype chain is mounted), then img is called

This function can only change the pointer to the URL, but not the pointer to the intinf. logo, so this is useless, so what to do? Make a change:

That’s ok. I don’t really need a function for this, but it makes it look a little bit better.

But! I also have a thought that if error returns an instantaneously generated image, there won’t be a problem with looping images. Try try:

Ok, this is done and the page displays normally

But there is still a problem. At present, we can draw pictures. After all, the pictures drawn are not beautiful. But what if the address is 404 again? So I improved a little bit:

That’s it. That’s the end of it.

Vue. Prototype. imgError = function (name,url, STR) {// if(typeof name! ==String){ for (let key in this){ if(name===this[key]){ name=key+''; Break}}} STR = STR | | "images load error" Windows. ErrorImgUrl = window. ErrorImgUrl | | []; window.errorImgUrl.push(event.target.src); // Wrong address no longer get second url=isErrorImg(url)? false:url this[name]=url||generateImg(str); / / get the default graphics function generateImg (STR) {window. ImgErrorStr = window. ImgErrorStr | | []; / / all the cue word window. An array of imgErrorDataURI = window. ImgErrorDataURI | | []; / / all the images have been generated if (window. ImgErrorStr. Includes (STR)) {/ / whether the cue word image to generate a return window.imgErrorDataURI[window.imgErrorStr.indexOf(str)] }else{ return Mapping(str); Function Mapping(STR){var canvas=document.createElement('canvas') canvas.width=200; canvas.height=200; var context = canvas.getContext('2d'); context.font="Bold 20px Arial"; Context. FillText (STR, (200 - STR. Length * 20) / 2, living); context.lineWidth =2; StrokeStyle =' RGB (100,180,120)'; context.beginPath(); // path start context.moveto (0,0); The context. The lineTo (0200); The context. The lineTo (200200); The context. The lineTo (200, 0); The context. The lineTo (0, 0); context.stroke(); var strDataURI=canvas.toDataURL("image/png"); window.imgErrorStr.push(str); window.imgErrorDataURI.push(strDataURI); return strDataURI; } function isErrorImg(url){for(let I in window.errorimgurl){if(window.errorimgurl [I].indexof (url)>=0){function isErrorImg(url){for(let I in window.errorimgurl){if(window.errorimgurl [I].indexof (url)>=0){ return true; } } return false; }};Copy the code