Javascript 即使未渲染组件，也要加载图像

我有一个用Vue.js开发的web应用程序，它有一个侧导航菜单组件。此组件具有仅在需要时显示的条件渲染。组件内部有一个图像，用于显示侧面菜单的关闭按钮

<transition name="fade">
  <div
    v-if="side_menu_is_open"
    ...
  >
    <div
      ...
    >
        <div class="mt-3 p-2" @click="toggleSideMenu">
          <img :src="require('../assets/icons/cancel.svg')" class="w-8">
        </div>

      <ul class="mt-4">
        ...
      </ul>
    </div>
  </div>
</transition>

...

---

这一切都很好。但是，在侧菜单组件的第一次渲染/显示时，图像需要一些时间来加载文件。即使未加载组件，是否仍要加载用于条件渲染的图像？

关闭按钮不应是条件渲染的一部分

像

{
//连续渲染
}

您可以在

created（）

方法中预加载该图像。这将确保浏览器在需要时加载了图像

var img = new Image();
img.src = '../assets/icons/cancel.svg';

---

或者不使用

标记，您可以直接在html中使用内联svg。

如果它是一个非常简单的svg，为什么不将其内联呢？