使用背景图的方式，实现图片路径不正确，展示默认图片

上一篇文章讲的是使用 img标签自带的onerror方法来实现图片路径不正确，展示默认图片

这边呢，来教大家使用背景图的方式实现 路径不正确时，展示默认图片

这次的需求是,图片需要位于圆角父盒子的正中间，但是图片的长宽跟盒子是不匹配的，图片不能进行拉伸，没被图片遮挡的父盒子是黑色的底色

用上一篇的那个方法就会导致一个问题，出现一个跟盒子大小一样的浅色图片时，盒子会有点黑色的边，因为图片挡不住圆角父盒子的那一点点的圆角边

所以这种情况下，使用背景图，就不会出现这些问题了

<div 
  v-for="item in list" 
  :key="item.id">

    <div 
      class="img"
      :style="{backgroundImage: item.backgroundImage}">
    </div>

</div>


<script>

  import noneImg from './images/noneImg.png'
  
  export default {

    data() {
      noneImg,
      list: []
    },

    methods: {
       // 生成 img 
      handleLoadImg(url) {
        return new Promise((resolve, reject) => {
          if (!url) {
            reject()
          }
          const elImg = new Image()

          elImg.onload = function() {
            resolve(`url(${url})`)
          }
          
          elImg.onerror = function() {
            reject()
          }
          
          elImg.src = url

        })
      },
      
      // 调接口
      getList() {
        getList().then(res => {
          this.list = res.data.data.map(item => {
            return {
              ...item,
              backgroundImage: 'none'
            }
          })
          this.list.forEach((item, index, self) => {
            // 在这里进行调用
            this.handleLoadImg(item.url).then(res => {
              self[index].backgroundImage = res  // 返回正确时,把当前路径进行赋值
            },()=>{
              self[index].backgroundImage = `url(${this.noneImg})`  // 返回错误时,默认图片赋值进去
            })
          })
        })
      }
    }

</script>

<style lang="less" scoped>
  .img {
    width: 200px;
    height: 150px;
    background-color: #000;
    background-repeat: no-repeat;
    background-position: 50% 0;
    background-size: auto 100%;
  }

</style>