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)

背景图片引入

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

相关推荐
RoyLin20 小时前
TypeScript设计模式:原型模式
前端·后端·node.js
我是天龙_绍20 小时前
vue Composables 组合式函数
前端
zjjuejin20 小时前
Maven项目的核心蓝图:POM文件
前端·maven
小气小憩20 小时前
“暗战”百度搜索页:Monica悬浮球被“围剿”,一场AI Agent与传统巨头的流量攻防战
前端·人工智能
前端付豪20 小时前
1、震惊!99% 前端都没搞懂的 JavaScript 类型细节
前端·javascript·面试
朝与暮20 小时前
js符号(Symbol)
前端·javascript
恋猫de小郭21 小时前
对于普通程序员来说 AI 是什么?AI 究竟用的是什么?
前端·flutter·ai编程
大怪v21 小时前
前端:人工智能?我也会啊!来个花活,😎😎😎“自动驾驶”整起!
前端·javascript·算法
我是天龙_绍21 小时前
vue3 props 如何写ts,进行类型标注
前端
叫我詹躲躲21 小时前
n8n 自动化工作流平台完整部署
前端·langchain·领域驱动设计