vue3+js+vite学习之静态资源引入（包括动态图片）

因为vite不支持require的写法，所以在vite中使用 new URL(url, import.meta.url).href 的方法获取图片url

一、两种url的情况

1、静态资源url

const imgUrl = new URL('/src/assect/img.png', import.meta.url).href

document.getElementById('hero-img').src = imgUrl

2、动态资源url

function getImageUrl(name) {
  return new URL(`/src/assect/${name}.png`, import.meta.url).href
}

二、知识点讲解

1、new URL()

new URL(url)
new URL(url, base)

url：一个表示绝对或相对 URL 的 DOMString 或任何具有字符串化方法的对象，如果 url 是相对 URL，则会将 base 用作基准 URL。如果 url 是绝对 URL，则无论参数 base 是否存在，都将被忽略。

base可选：一个表示基准 URL 的字符串，当 url 为相对 URL 时，它才会生效。如果未指定，它默认为 undefined。

2、import.meta

import.meta 对象包含关于当前模块的信息。

import.meta.url会暴露当前模块的 URL

如果在vue2中习惯用别名@（例如"@/assect/img.png"）来表示文件路径，在vue3中可以，直接用"src/assect/img.png"来代替，src与@等价，因为import.meta.url会暴露当前模块的 URL