vue背景图片怎么用变量表示?

需求是这样的,容器的背景图片需要根据条件判断来显示不同的背景图

写法如下

//先在data里面定义背景图片变量
data() {
      return {
        backPic:require('../assets/img/logintfxq.png'),
      }
    }
    

注意,定义的时候本地图片一定要加上require,否则图片的src会被解析成字符串

	   //created里面判断条件
       // 天府新区域名:http://tfxq-xxx.xxxx.com
       // 高新区域名:http://cdht-xxx.xxxx.com
      var host = window.location.host    //获取当前浏览器域名
	
      if(host == 'tfxq-xxx.xxxx.com'){
        this.backPic = require('../assets/img/logintfxq.png')
      }else if(host == 'cdht-xxx.xxxx.com'){
        this.backPic = require('../assets/img/logincdht.png')
      }else{
	//都不是则显示默认背景图片
        this.backPic = require('../assets/img/defaltBack.png')
      }
    

你可能感兴趣的:(vue,前端)