文章目录

目标

  • 列表每行弹框背景图定制化显示

方法

  • 将所有图片以行id命名放在相对路径文件夹中
  • 用插件实现图片懒加载
  • 在打开弹框的时候改变图片路径变量的值

插件安装/模块引入

  • 在项目中安装插件vue-lazyload 
npm install vue-lazyload   --save
  • 在main.js中引入 
import VueLazyLoad from 'vue-lazyload'
Vue.use(VueLazyLoad,{
   
    error:'./assets/error.png',                        //报错需要的图片
    loading:'./assets/loading.gif'					// 替换需要的图片
})

图片懒加载

  • 在页面中使用，src改用v-lazy指令懒加载图片资源 
<img v-lazy="require(`${src_img}`)" :key="cur_id">

注意：这里key的作用是防止出现图片资源路径更改图片不刷新的情况出现！！！

  • 在data里面设置初始的src_img，一定要有这个图片，不然会报错 
src_img: './imgs/bg.png'
  • 在行弹框打开事件中更改图片资源路径 
open_handle(row) {
   
	this.src_img = `./imgs/${
     row.id}.png`
}