Vue2常用功能日常总结(3) - 动态设置背景图片

日常开发中，经常会遇到一些需求，需要动态设置背景图片，如：不同场景使用不同背景图【宣传类需求】；相同配置，但所属不同，也需要设置不同背景图以示区别【项目一对多上线】；以及客户需要自定义背景图片 等等。

遇到这种情况时你总不能给客户说，你先把背景图发给我，我配置在项目里面，然后给你发版，那不仅客户要疯，估计运维和领导都觉得你疯了，因此动态设置背景图片是最好的方式。

动态设置背景图片 主要是分两步：1、模板动态样式配置及对应参数设置；2、图片获取，对应参数赋值

1、模板动态样式配置及对应参数设置

模板动态样式配置，样式参数设置【这里尤其注意 backgroundImage属性 url 的拼接】

<template>
  <div class="el-col el-col-24  position-absolute" :style="{ backgroundImage: `url(${loginBackground})` }">div>
template>

data() {
  return {
    loginBackground: null // backgroundImage参数地址
  }
},

2.1 所述，先默认 loginBackground 参数值为空，在接口请求返回之前不做背景图片显示，等到接口返回后，再根据接口返回的参数进行相应判定，继而给 loginBackground赋予不同的值

3.2 注意2

• 如上 3.1所述，反正你要闪烁就闪烁嘛，要切换就切换嘛，我不在意都能接受，既然你都三目运算符判定加载了，那我是不是也不需要 require('xxxx.png') 和 import xxxx from 'xxxx.png'  图片了，直接写图片的相对地址，答案是：不行。如下所示：

  <template>
    <div
      class="el-col el-col-24  position-absolute"
      :style="{ backgroundImage: `url(${loginBackground ? loginBackground : '../../assets/images/loginBgpng.png'})` }"
    >div>
  template>

• 原因是：这种相对地址写法打包后项目找不到图片位置(图片实际位置和参数地址对不上)，如下所示：
  

项目打包后，该图片实际地址为 dist/static/img/loginBgpng.184946ca.png

而项目代码里面的地址还是之前的相对地址，这下不仅地址对不上了，连文件名都对不上了

• 从上面两张图可以看出，直接写图片的相对地址也是不行的，会导致图片因图片地址和文件名的改变而找不到对应的图片，从而显示不出来。

3.3 总结

• 如上综合所述，动态设置背景图片有好处，但也有坑需要注意。