我正在开发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>
我检查了以下内容:
-
文件路径正确,并且在两个位置都匹配。
-
没有动态或有条件地加载图像。
-
我没有对此图像使用延迟加载。
为什么我仍然收到这个警告,我该如何修复它?
