I'm working on a Vue.js application and I'm trying to preload an image using the tag. However, I keep getting a warning that says:
The resource http://localhost:8085/img/secondGet.webp was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate
asvalue and it is preloaded intentionally.
Here's my HTML code:
<!DOCTYPE html>
<html lang="">
<head>
<!-- ... -->
<link rel="preload" as="image" href="img/secondGet.webp">
<!-- ... -->
</head>
<body>
<!-- ... -->
</body>
</html>
And here's how I'm using the image in my Vue component:
<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>
I've checked the following:
- The file path is correct and matches in both places.
- The image is not being loaded dynamically or conditionally.
- I'm not using lazy loading for this image.
Why am I still getting this warning, and how can I fix it?