尽管 Vue.js 应用程序中预加载的图像未使用警告，但作为属性是正确的-解网

问：

我正在开发一个 Vue.js 应用程序，我正在尝试使用标签预加载图像。但是，我不断收到一条警告，上面写着：

资源 http://localhost:8085/img/secondGet.webp 是使用链接预加载预加载的，但在窗口的加载事件后的几秒钟内未使用。请确保它具有适当的值，并且是有意预加载的。as

这是我的HTML代码：

<!DOCTYPE html>
<html lang="">
  <head>
    <!-- ... -->
    <link rel="preload" as="image" href="img/secondGet.webp">
    <!-- ... -->
  </head>
  <body>
    <!-- ... -->
  </body>
</html>

以下是我在 Vue 组件中使用图像的方式：

<div class="bg-white pt-12">
    <!-- onboard hero -->
    <Hero>
      <template #img>
        <img
          class="w-full h-full absolute object-cover bg-image"
          :src="require('../../public/img/secondGet.webp')"
          alt="main hero image background"
        />
      </template>

我已经检查了以下内容：

文件路径正确，并且在两个位置都匹配。
图像不是动态或有条件地加载的。
我没有对此图像使用延迟加载。

为什么我仍然收到此警告，我该如何解决？

javascript html vue.js 性能预加载

尽管 Vue.js 应用程序中预加载的图像未使用警告，但作为属性是正确的

Preloaded image not used warning in Vue.js application despite correct as attribute

评论