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

vue3动态引入图片

引用:https://blog.csdn.net/weixin_46769087/article/details/144206429

vue3,,,require引入图片失效了,,
直接在动态绑定的src属性上面用 @/assets/xxx ,,不会解析到这个图片,,,
需要现在js中加载好对应的资源再引入:

const name = "c.jpg";
const imagePath = new URL(`../assets/${name}`, import.meta.url).href;


const iconImgList=ref([
  {icon:new URL("@/assets/images/1.jpeg",import.meta.url).href},
  {icon:new URL("@/assets/images/2.jpeg",import.meta.url).href},
  {icon:new URL("@/assets/images/3.jpeg",import.meta.url).href},
  ])

相关文章:

  • 前端依赖nrm镜像管理工具
  • 软考程序员考试内容和备考策略
  • 补充:文件上传、下载传输给前端之直接传递图片二进制数据:网络中的图片、音频、视频等非字符数据的传输
  • 港科大提出开放全曲音乐生成基础模型YuE:可将歌词转换成完整歌曲
  • 每日Attention学习24——Strip Convolution Block
  • 嵌入式开发工程师笔试面试指南-Linux系统移植
  • 计算机组成与接口10
  • 深入探索C语言中的sscanf和sprintf函数
  • 【C++笔记】C++11智能指针的使用及其原理
  • 2025年SCI1区TOP:真菌生长优化算法FGO,深度解析+性能实测
  • java23种设计模式-观察者模式
  • Spring MVC框架六:Ajax技术
  • 用 DeepSeek 打样!KubeSphere LuBan 用 3 天/3 分钟“干掉”大模型部署焦虑
  • 第五六七章
  • Element Plus: el-card的内容滚动问题
  • ES 客户端 API 二次封装思想
  • C++大整数类的设计与实现
  • 点云配准技术的演进与前沿探索:从传统算法到深度学习融合(2)
  • 【Grok3】强化学习(Reinforcement Learning, RL)复习文档
  • Python 编程题 第二节:组合数字、乘法口诀表、水仙花数、反向输出四位数、判断三角形
  • 奔驰一季度利润降四成,受美国加征关税影响放弃全年盈利展望
  • 国家能源局通报上月投诉情况:赤峰有群众反映电费异常增高,已退费
  • 气候资讯|4月全球前沿气候科学研究&极端天气气候事件
  • 美航母一战机坠海,美媒:为躲避胡塞武装攻击,损失超六千万美元
  • 金科服务:大股东博裕资本提出无条件强制性现金要约收购,总代价约17.86亿港元
  • 牛市早报|国家发改委:将推出做好稳就业稳经济推动高质量发展若干举措