首页
职业课程
师资团队
免费课程
认证考试
学习平台
学员成果
关于我们
网络安全文章页活动benner
新闻详情页
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标签

联系电话:17713623990