vue项目如何实现等背景图片加载完成后再显示

实现等待背景图片加载完毕再显示可以通过以下步骤实现：

1. 在 CSS 中定义需要显示背景图片的元素样式，并在其中设置 background-image 属性。

2. 在 Vue 组件的 created 生命周期中，创建 Image 对象，并将需要加载的背景图片的 URL 赋值给 Image 对象的 src 属性。

3. 监听 Image 对象的 onload 事件，在图片加载完成后，将 Vue 组件中的一个变量设置为 true，表示背景图片已加载完成。

4. 在组件模板中使用 v-if 指令，只有在背景图片加载完成的情况下才显示需要显示背景图片的元素。

具体实现代码如下：

<template>
  <div v-if="isBgLoaded" class="bg-image"></div>
</template>

<script>
export default {
  data() {
    return {
      isBgLoaded: false
    };
  },
  created() {
    const bgImg = new Image();
    bgImg.onload = () => {
      this.isBgLoaded = true;
    };
    bgImg.src = "背景图片的 URL";
  }
};
</script>

<style>
.bg-image {
  background-image: url("背景图片的 URL");
  /* 其他样式代码 */
}
</style>

这样，当背景图片加载完成后，isBgLoaded 变量的值会变为 true，组件中的背景图片元素就会显示出来。