这里想要展现的是当数据里有图片的时候加载数据里的图片,没有数据的时候或者加载失败的时候显示默认的图片。
本身是一个很简单的功能,我搞了半天,因为我的图片路径数据外面包裹了一个数组,我循环了数组,导致我渲染页面的时候,这个数组如果为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构造函数选项可以参照中文文档,我列出的是我用到的地方。

Logo

前往低代码交流专区

更多推荐