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

本文链接：https://blog.youkuaiyun.com/PursueExcellence/article/details/103037100

本文探讨了在Vue项目中使用生命周期函数动态设置body背景图的方法，解决了页面切换时背景残留的问题，并分享了利用require函数异步加载资源的技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用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