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

最新推荐文章于 2024-07-04 15:23:33 发布

想想水门会怎么C

最新推荐文章于 2024-07-04 15:23:33 发布

阅读量1.7k

点赞数 1

文章标签： vue 前端

本文链接：https://blog.csdn.net/weixin_55553106/article/details/115727576

版权

在Vue应用中，根据浏览器主机名动态改变组件背景图片。首先在data中定义背景图片变量，然后在created钩子中通过window.location.host获取当前域名，依据不同域名设置相应的背景图片。若不符合特定域名，则加载默认背景图片。

摘要由CSDN通过智能技术生成

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

写法如下

//先在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')
      }