Vue.js应用中已正确设置as属性仍触发图片预加载未使用警告

为什么会出现这个警告？ #

核心原因是你预加载的图片路径和Vue组件中实际使用的图片路径，在浏览器看来并不是同一个资源：

• 你在index.html里写的预加载路径是img/secondGet.webp，这是原始的未编译路径。
• 但Vue组件中用require('../../public/img/secondGet.webp')时，webpack会对资源进行编译处理（比如添加哈希值，生成类似img/secondGet.abc123.webp的路径），浏览器会认为这是两个完全不同的资源，因此预加载的那个资源没被实际使用，触发了警告。

解决方法 #

方法一：统一使用静态路径（最简单） #

把组件里的:src="require(...)"改成直接使用绝对静态路径，让实际使用的路径和预加载路径完全一致：

<img
  class="w-full h-full absolute object-cover bg-image"
  src="/img/secondGet.webp"
  alt="main hero image background"
/>

同时保留index.html里的预加载标签，用Vue CLI提供的变量保证路径适配不同环境：

<link rel="preload" as="image" href="<%= BASE_URL %>img/secondGet.webp">

方法二：动态添加预加载链接（适配webpack哈希处理） #

如果你的项目必须用require处理图片（比如需要webpack的资源哈希缓存功能），可以在组件的生命周期钩子中动态创建预加载标签，直接使用require返回的编译后路径：

<script>
export default {
  beforeMount() {
    const preloadLink = document.createElement('link');
    preloadLink.rel = 'preload';
    preloadLink.as = 'image';
    preloadLink.href = require('../../public/img/secondGet.webp');
    document.head.appendChild(preloadLink);
  }
}
</script>

这种方式能保证预加载的路径和组件中使用的src完全一致，浏览器会正确复用预加载的资源，不会再触发警告。

方法三：调整webpack配置（不推荐，仅特殊场景） #

如果你的webpack配置对public目录下的资源也添加了哈希值，可以在配置中排除该图片，让它保持原始文件名，这样预加载路径和实际使用路径就能匹配。但这种方法会失去哈希带来的缓存更新优势，除非有特殊需求，否则不建议使用。

内容的提问来源于stack exchange，提问作者Tomas Gil Amoedo