图片找不到的处理方案

在HTML中图片找不到的解决方法

• 在html中，img标签的图片路径资源找不到或者服务器上的图片损坏，除了可以用alt属性用文字提示图片的内容告诉用户外，还可以用onerror属性，用另外一张专门用于处理图片容错的图片代替它，这里搭建了一个最简单的demo文件夹，里面包含一个html文件、一张需要上传的图片和一张解决容错的图片

• onerror属性的使用方法如下：

  onerror="this.src='XXX.jpg'"

• 具体实现方法如下：
  
• 正确的图片路径应该为example.jpg,此时，浏览器呈现出的图片是error_img.jpg：
  
• 而正确修改路径后：

小程序开发中处理图片找不到问题

• 在小程序开发中，处理图片错误的方法与html有区别，在官方文档中也给我们了这样一个替代图片的方法：

• 在image标签中添加方法：

binderror="onImageError"

• 在相应的js文件中写一个我们定义的处理图片错误的方法，这里我们是onImageError方法：

onImageError: function(e){
    var index = e.currentTarget.dataset.index;  //获取我们在image标签中传过来的data-index的数据，以获取下标
    var topList = this.data.topList; //获取data中接收我们发出请求获得响应的数据
    var errorImageItem = topList[index]; //获取图片出错的对象
    errorImageItem.images.large = '../../images/error_img.jpg'; //把路径修改为我们的替代图片
    topList[index] = errorImageItem; //把修改完路径后的对象覆盖原先的对象
    this.setData({
      topList: topList //重新赋值
    })
  }

• 处理后的结果如下：