img标签的onerror事件处理与注意事项

1.img 标签除了 onerror 属性外，还有其他获取管理员路径的办法吗？

src 指定一个远程的脚本文件，获取 referer

2.img 标签除了 onerror 属性外，并且 src 属性的后缀名，必须以.jpg 结尾，

怎么获取管理员路径?

1,远程服务器修改 apache 配置文件，配置.jpg 文件以 php 方式来解析

AddType application/x-httpd-php .jpg

会以 php 方式来解析

3.img 标签除了 onerror 属性外，解决办法

解决方法一、图片路径错误使用默认图片站位：

使用1：html开发中

//控制它不循环，代码如下：

function nofind(){

var img=event.srcElement;

img.src="images/logoError.png";

img.οnerrοr=null; 控制不要一直跳动

} 

如果logoError.png 也不存在，则继续触发 onerror，导致循环，故会出现打开网页时提示 Stack overflow at line: 0错误。特别说明：如果图片存在，但网络很不通畅，也可能触发 onerror。

使用2：vue开发中，this不在是元素本身了

 //当默认图也不存在时，图片加载死循环。

data(){

  return {

    defaultImg: 'this.src="' + require('../../assets/images/moren.png') + '"'

  }

}

//不建议

imageError: function(index) {

this.gList[index].Picture = this.ImgUrl+"/static/category/ blockimg.png";

},

//建议

< img src=“123” @error=“defImg()” />

defaultImg: require("./img/defPic.png")

import defaultImg from './img/defPic.png'

defImg(){

let img = event.srcElement;  //当前元素

img.src = this.defaultImg;

img.onerror = null; //防止闪图

 }

使用3：可以给img标签加背景图片，代码如下：

.headLogo img{

  display: block;

  width: 270px;

  height: 60px;

  background: url(../images/logo.png) no-repeat 0 0;

  margin: 25px 0;

 }

左上角任然有碎片图标，还需借用img标签的onerror事件和javascript（参考上文）， 在装载文档或图像的过程中如果发生了错误，就会触发onerror事件。可以使用一张提示错误的图片代替显示不了的图片

使用4：大招 通过vue自定义指令

//全局注册自定义指令，用于判断当前图片是否能够加载成功，可以加载成功则赋值为img的src属性，否则使用默认图片

Vue.directive('real-img', async function (el, binding) {//指令名称为：real-img

  let imgURL = binding.value;//获取图片地址

  if (imgURL) {

    let exist = await imageIsExist(imgURL);

    if (exist) {

      el.setAttribute('src', imgURL);

    } 

  }

})

/**

 * 检测图片是否存在

 * @param url

 */

let imageIsExist = function(url) {

  return new Promise((resolve) => {

    var img = new Image();

    img.onload = function () {

      if (this.complete == true){

        resolve(true);

        img = null;

      }

    }

    img.onerror = function () {

      resolve(false);

      img = null;

    }

    img.src = url;

  })

}

<!--v-real-img 就是刚刚定义的指令，绑定的为真实要显示的图片地址。src为默认图片地址-->

解决方法二、图片展示不出来，删除图片不展示它：

< img src=“123” :οnerrοr=“defaultImg” />

默认图地址

defaultImg: ‘this.remove()’

因为错误图片在各个浏览器失败的样式都一样，所以地址错误时，直接删除img标签