前言:我想在vue3项目的页面引入图片总是不成功,最后看到说是Vite在作祟,让我来瞧瞧,是怎么回事咧。
看看官方文档怎么说Vite官网地址
主要是
new URL(url, import.meta.url)
import.meta.url 是一个 ESM 的原生功能,会暴露当前模块的 URL。将它与原生的 URL 构造器 组合使用,在一个 JavaScript 模块中,通过相对路径我们就能得到一个被完整解析的静态资源 URL:
const imgUrl = new URL('./img.png', import.meta.url).href
document.getElementById('hero-img').src = imgUrl
那么就用不到require 了,去掉直接引入imgUrl使用