当前位置: 首页 > news >正文

vue3引入本地静态资源图片

一、单张图片引入
import imgXX from '@/assets/images/xx.png'

在这里插入图片描述

二、多张图片引入

说明:import.meta.url 是一个 ESM 的原生功能,会暴露当前模块的 URL。将它与原生的 URL 构造器 组合使用
在这里插入图片描述

在这里插入图片描述在这里插入图片描述

注意:填写自己项目图片存放的路径

/** vite的特殊性, 需要处理图片 */
export const requireImg = (imgPath:String) => {return new URL(`../assets/images/${imgPath}`, import.meta.url).href;
};

在这里插入图片描述

图片预览成功啦~
在这里插入图片描述

相关文章:

  • 免费的CMS指纹识别系统
  • 【动态规划 前缀和】2478. 完美分割的方案数
  • 国产音频放大器工作原理以及应用领域
  • 外贸企业选择什么网络?
  • Git的安装配置及使用(超详细!!!)
  • LeetCode.224基本计算器
  • 【幂等性】详解
  • springboot升级到2.7.17后,quartz集群模式配置修改
  • java多线程之ThreadLocal详解
  • 【Linux详解】进程地址空间
  • 网络爬虫中Xpath的使用方法
  • 【微信小程序开发实战项目】——如何制作一个属于自己的花店微信小程序(1)
  • 深度学习21-30
  • 先导小型工业4.0教学生产线助力制造业技术创新
  • 老年生活照护实训室:探索现代养老服务的奥秘
  • [译] React v16.8: 含有Hooks的版本
  • create-react-app做的留言板
  • ERLANG 网工修炼笔记 ---- UDP
  • JavaScript实现分页效果
  • JS+CSS实现数字滚动
  • Node项目之评分系统(二)- 数据库设计
  • 将回调地狱按在地上摩擦的Promise
  • 目录与文件属性:编写ls
  • 算法-插入排序
  • 一个完整Java Web项目背后的密码
  • 用Python写一份独特的元宵节祝福
  • 在weex里面使用chart图表
  • # SpringBoot 如何让指定的Bean先加载
  • #我与Java虚拟机的故事#连载06:收获颇多的经典之作
  • (1/2) 为了理解 UWP 的启动流程,我从零开始创建了一个 UWP 程序
  • (20)目标检测算法之YOLOv5计算预选框、详解anchor计算
  • (android 地图实战开发)3 在地图上显示当前位置和自定义银行位置
  • (草履虫都可以看懂的)PyQt子窗口向主窗口传递参数,主窗口接收子窗口信号、参数。
  • (代码示例)使用setTimeout来延迟加载JS脚本文件
  • (二)构建dubbo分布式平台-平台功能导图
  • (附源码)SSM环卫人员管理平台 计算机毕设36412
  • (过滤器)Filter和(监听器)listener
  • (九)One-Wire总线-DS18B20
  • (七)Knockout 创建自定义绑定
  • (四) 虚拟摄像头vivi体验
  • (转)mysql使用Navicat 导出和导入数据库
  • .“空心村”成因分析及解决对策122344
  • .net core Swagger 过滤部分Api
  • .net 调用php,php 调用.net com组件 --
  • .NET 使用 JustAssembly 比较两个不同版本程序集的 API 变化
  • .NET/C# 反射的的性能数据,以及高性能开发建议(反射获取 Attribute 和反射调用方法)
  • .vollhavhelp-V-XXXXXXXX勒索病毒的最新威胁:如何恢复您的数据?
  • @Async注解的坑,小心
  • @ModelAttribute注解使用
  • [ IOS ] iOS-控制器View的创建和生命周期
  • []Telit UC864E 拨号上网
  • [202209]mysql8.0 双主集群搭建 亲测可用
  • [240607] Jina AI 发布多模态嵌入模型 | PHP 曝新漏洞 | TypeScript 5.5 RC 发布公告
  • [acwing周赛复盘] 第 69 场周赛20220917
  • [Angular] 笔记 8:list/detail 页面以及@Input