记一次Vue 动态修改body背景图片时图片获取不到的问题

使用css设置body背景图，会出现页面切换后，新页面依然显示背景图的问题，所以利用好vue组件的生命周期可以解决这个问题。

但是在利用生命周期函数动态获取背景图片时会出现图片获取不成功的问题。

问题：

在css中设置body背景图，使用相对路径可以设置成功，但是采用生命周期函数相对路径获取图片却获取不到

摸索：

使用网络图片的绝对路径可以设置成功

解决：

使用require('相对路径')解决，具体写法如下：

// 创建前设置
  beforeCreate () {
    const urlPah = require('../../assets/indexBg.jpg')
    document.querySelector('body')
      .setAttribute('style', 'background-repeat:no-repeat;background-size:100%; background-image:url("' + urlPah + '") ')
  },
  // 销毁前清除
  beforeDestroy () {
    document.querySelector('body').removeAttribute('style')
  }

原因：

尚不明确，有可能是body在初始化时，图片资源还未加载所致。使用require可以实现异步加载资源，在获取不到资源时不会阻塞页面加载，待其他资源加载完毕后，再获取资源。纯属猜测，恳请路过的大神批评指点。

参考：

https://www.cnblogs.com/xzybk/p/11726973.html

https://www.php.cn/js-tutorial-420284.html