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

webgis开发12138

已于 2024-03-01 10:53:39 修改

阅读量1.7k

点赞数 1

分类专栏： vue3+js+vite学习文章标签： javascript 学习前端

于 2023-09-14 15:22:23 首次发布

本文链接：https://blog.youkuaiyun.com/u014015203/article/details/132870593

版权

vue3+js+vite学习专栏收录该内容

7 篇文章

订阅专栏

博客介绍了在vite中获取图片url的方法，因vite不支持require写法，可使用new URL(url, import.meta.url).href。还提及两种url情况，即静态和动态资源url，同时对new URL()和import.meta两个知识点进行讲解，也说明了vue3中文件路径表示的变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

因为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