vue + vuelazyload图片懒加载 + 显示默认图片 （视频门户网站）

这里想要展现的是当数据里有图片的时候加载数据里的图片，没有数据的时候或者加载失败的时候显示默认的图片。
本身是一个很简单的功能，我搞了半天，因为我的图片路径数据外面包裹了一个数组，我循环了数组，导致我渲染页面的时候，这个数组如果为null的时候，我img标签直接不出现，我曾经尝试过用css给img标签写上默认的背景图，在标签里用三元运算，判断数组是不是为空，然后判断不为空的时候是显示数据里的图，为空时默认图（这里vuelazyload中有一个可以直接添加数据加载失败，出现默认图），这个思想是对的，但是由于我循环为空的时候，标签就直接不出现，我根本没法执行。下面贴上几句代码：

<img v-lazy="list.ProgramThumbArray != null ? list.ProgramThumbArray[0].ImageUrl : src" alt="">

data () {
    return {
        src: require("../images/Default.png")
    }
}

这里的list.ProgramThumbArray是包着我图片的数组，当他不为空，显示的是我第一个数组里的图片地址，为空显示的路径里的默认图片

下面我来说下vuelazyload的使用：
首先我们先在npm上下载vue-lazyload的包：

npm install vue-lazyload --save

然后我们在main.js里面import这个包，当然，单单这一个包是不够的，还得其他的文件

import Vue from 'vue'
import App from '@/App'
import VueLazyload from 'vue-lazyload'

然后我们配置vue-lazyload;

Vue.use(vueLazyload, {
    error: require('./images/Default.png'),
    loading: require('./images/loading.jpg'),
    preLoad: 1,
    attempt: 1
})

然后组件里的写法如我的第一段代码

<img v-lazy="img">

lazyload构造函数选项可以参照中文文档，我列出的是我用到的地方。