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

vite vue 动态导入图片

背景:

vite框架的官网,有对项目文件的动态引入文件的介绍,包括:引入图片文件的方法。

function getImageUrl(name) {
  return new URL(`./dir/${name}.png`, import.meta.url).href
}

效果展示,分开发环境和部署环境:

开发环境:

部署环境: 

核心代码:

实现效果分析:开发环境和部署环境,图片都可以正常显示。 

 但是封装的公共的动态引入文件的写法不正确:

export const getAssetsFile = (name) => {
  const imgPath= `../assets/images/${name}`;//这儿传了一个变量
  return new URL(imgPath, import.meta.url).href;
};

vite官网链接:点击跳转 


http://www.kler.cn/a/507305.html

相关文章:

  • 【Redis】Redis 集群中节点之间如何通信?
  • excel仅复制可见单元格,仅复制筛选后内容
  • http转化为https生成自签名证书
  • C 语言标准库函数——strtol函数
  • 2025 年前端开发学习路线图完整指南
  • Vue3 Element-Plus el-tree 右键菜单组件
  • 常用的C库函数与头文件
  • laravel10.x 框架中间件实现原理
  • 使用 Tailwind CSS 的几点感触
  • 什么是基础镜像
  • 解决:ubuntu22.04中IsaacGymEnv保存视频报错的问题
  • 【Python通过UDP协议传输视频数据】(界面识别)
  • 基于微信小程序的摄影竞赛系统设计与实现(LW+源码+讲解)
  • 蓝桥杯算法|基础笔记(1)
  • 基于JavaFX+Mysql实现的报刊订阅管理系统
  • vite功能之---npm 依赖解析和预构建
  • 力扣解题汇总_JAVA
  • 仿射密码实验——Python实现(完整解析版)
  • 大模型——RAG
  • 设置完端口转发后,本机可以ping通公网设备,但公网设备无法ping通本机内网ip
  • RabbitMQ与Kafka的比较及应用
  • CSS布局与响应式
  • G1原理—G1的GC日志分析解读
  • 二百八十四、Flink——Flink提交任务两种方式(亲测、附截图)
  • 去中心化身份验证:Web3如何确保元宇宙中的身份安全
  • 如何在gitlab cicd中实现每月10号上午执行