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)

背景图片引入

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

相关推荐
泰山小张只吃荷园6 分钟前
期末Python复习-输入输出
java·前端·spring boot·python·spring cloud·docker·容器
工业互联网专业37 分钟前
Python毕业设计选题:基于django+vue的期货交易模拟系统的设计与实现
vue.js·python·django·毕业设计·源码·课程设计
悦涵仙子41 分钟前
vueuse中的useTemplateRefsList
前端·javascript·vue.js
萧萧玉树42 分钟前
分布式在线评测系统
前端·c++·后端·负载均衡
NightCyberpunk1 小时前
Ajax与Vue初步学习
vue.js·学习·ajax
haima951 小时前
ubuntu安装chrome无法打开问题
前端·chrome
放逐者-保持本心,方可放逐1 小时前
XSS 与 CSRF 记录
前端·xss·csrf·浏览器安全
徊忆羽菲1 小时前
利用HTML5和CSS来实现一个漂亮的表格样式
前端·css·html5
不爱说话郭德纲1 小时前
Stylus、Less 和 Sass 的使用与区别
前端·css·面试·less·sass·stylus
凄凄迷人2 小时前
如何调试 chrome 崩溃日志(MAC)
前端·chrome·macos·crash