Vue3 + Vite + ts引入本地图片

Vue3 + Vite + ts引入本地图片

单张图片导入

单个图片导入,不过多阐述,通过 import 导入需要使用的图片。

javascript 复制代码
import imgName from '@/assets/img/imgName.png'

多张图片导入

javascript 复制代码
new URL() + import.meta.url

import.meta.url 是一个 ESM 的原生功能,会暴露当前模块的 URL。将它与原生的 URL 构造器 组合使用。

在一个 JavaScript 模块中,通过相对路径我们就能得到一个被完整解析的静态资源 URL:(相对路径一定要写正确,当前引入图片的文件,相对图片的位置)

TypeScript 复制代码
const getWeatherIcon = (iconId) => {
  return new URL(`/assets/images/weather/W${iconId}@3x.png`, import.meta.url).href;
}

通过传入所需图片的关键字符拿到对应图片

TypeScript 复制代码
getWeatherIcon(imagecode)

背景图片引入

如果是背景图片引入的方式(一定要使用相对路径)

相关推荐
Apifox11 分钟前
如何在 Apifox 中通过 Runner 运行包含云端数据库连接配置的测试场景
前端·后端·ci/cd
麦麦大数据34 分钟前
neo4j+django+deepseek知识图谱学习系统对接前后端分离前端vue
vue.js·django·知识图谱·neo4j·deepseek·在线学习系统
树上有只程序猿38 分钟前
后端思维之高并发处理方案
前端
庸俗今天不摸鱼1 小时前
【万字总结】前端全方位性能优化指南(十)——自适应优化系统、遗传算法调参、Service Worker智能降级方案
前端·性能优化·webassembly
黄毛火烧雪下1 小时前
React Context API 用于在组件树中共享全局状态
前端·javascript·react.js
Apifox2 小时前
如何在 Apifox 中通过 CLI 运行包含云端数据库连接配置的测试场景
前端·后端·程序员
一张假钞2 小时前
Firefox默认在新标签页打开收藏栏链接
前端·firefox
高达可以过山车不行2 小时前
Firefox账号同步书签不一致(火狐浏览器书签同步不一致)
前端·firefox
m0_593758102 小时前
firefox 136.0.4版本离线安装MarkDown插件
前端·firefox
掘金一周2 小时前
金石焕新程 >> 瓜分万元现金大奖征文活动即将回归 | 掘金一周 4.3
前端·人工智能·后端