vue3无法插入背景准备好了的图片

在 Vue 3 中，如果遇到动态加载背景图片并且图片准备好后再插入的问题，可以使用 `v-if` 或者 `v-bind:style` 结合 `img` 元素的 `load` 事件来解决。以下是常见的解决方案：

1. 使用 `v-if` 条件渲染：

   <div v-if="backgroundImageReady">
     <img :src="backgroundImage" alt="背景图" />
   </div>

然后，在你的 JavaScript 中设置 `backgroundImageReady` 的状态，当图片加载完成时变为 `true`。

2. 直接操作样式 (`v-bind:style`)：

   <div :style="{ 'background-image': backgroundImage && 'url(' + backgroundImage + ')' }"></div>

同样，在 `data` 或 `computed` 部分监控图片是否加载完成。

3. 利用 `img` 的 `load` 事件：

   <template>
     <div ref="bgImg">
       <img :src="backgroundImage" @load="onImageLoaded" alt="背景图" />
     </div>
   </template>

   <script>
   export default {
     data() {
       return {
         backgroundImage: '',
         backgroundImageReady: false,
       };
     },
     methods: {
       onImageLoaded() {
         this.backgroundImageReady = true;
       },
     },
   }
   </script>

当图片加载完成后，`onImageLoaded` 方法会被触发，此时你可以更新 `backgroundImageReady` 的值。