当前位置: 首页 > 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;
};

在这里插入图片描述

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

http://www.lryc.cn/news/389244.html

相关文章:

  • git 禁止dev合并到任何其他分支
  • 第二节:如何使用thymeleaf渲染html(自学Spring boot 3.x的第一天)
  • 计算机相关术语科普之什么叫网关(Gateway)
  • B站网页部分API
  • 使用Spring Boot和Spring Security保护你的应用
  • CVE-2019-12272 Openwrt可视页面LuCi命令注入漏洞复现(完结)
  • 【多线程开发 4】从源码学习LockSupport
  • gameui C++的代码
  • 1.什么是js?特点是什么?组成部分?
  • 爬虫是什么?
  • 深入理解Presto分页查询:方法与最佳实践
  • 如何使用Go语言中的并发函数实现网络爬虫的分布式部署?
  • STM32第九课:DHT11温湿度传感器
  • JVM线上监控环境搭建Grafana+Prometheus+Micrometer
  • MyBatis(17)MyBatis 如何处理枚举类型
  • 云数据中心运维新纪元:让Linux服务器如虎添翼
  • C# 多线程造成CPU占用率高
  • 谈谈在不同公司中的SAP职位
  • 服务器连接不上
  • 论文辅导 | 基于贝叶斯优化-卷积神经网络-双向长短期记忆神经网络的锂电池健康状态评估
  • 安卓实现微信聊天气泡
  • 软件测试(功能、接口、性能、自动化)详解 | 测试人生路
  • 【面试题】网络IO模型
  • 数据结构-----【链表:基础】
  • 如何在pycharm里面运行pytest用例
  • Charles抓包工具踩坑记录
  • 【RabbitMQ实战】邮件发送(直连交换机、手动ack)
  • python 笔试面试八股(自用版~)
  • 《SpringBoot+Vue》Chapter04 SpringBoot整合Web开发
  • 腾讯地图异步调用