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

vue3中动态引入本地图片的两种方法

方法一

 <img width="10" height="10":src="`/src/assets/nncs2/jiantou${index + 1}.png`" alt="" /> 

推荐 简单好用

方法二

const getImg = index => {const modules = import.meta.glob('@/assets/nncs2/**/*.{png,svg,jpg,jpeg}', { eager: true })const url = `/src/assets/nncs2/jiantou${index + 1}.png`// console.log(modules)if (modules[url]) return modules[url].default
}<img width="10" height="10" :src="getImg(index)" alt="" class="lableImg" />

相比第一种方法 更麻烦一点

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

相关文章:

  • Linux网络——socket编程与UDP实现服务器与客户机通信
  • 大型语言模型中推理链的演绎验证
  • openharmony 应用支持常驻和自启动
  • Winform中引入WPF控件后键盘输入无响应
  • 多线程——死锁
  • 链路追踪可视化利器之火焰图
  • C语言 ——— 条件编译指令实际用途
  • 备战软考Day01-计算机系统
  • 从C语言过渡到C++
  • Docker 的安装和使用
  • 鸿蒙轻内核A核源码分析系列七 进程管理 (2)
  • 关于TypeScript使用讲解
  • C语言 | Leetcode C语言题解之第393题UTF-8编码验证
  • Netty权威指南:Netty总结-编解码与序列化
  • FIDAVL:基于视觉语言模型的假图像检测与归因 !
  • 如何通过海外云手机提升运营效率
  • 数据库4个范式的说明
  • Excel怎么截图?快速捕捉工作表的多种方法
  • MyBatis动态SQL标签总结、开发手册、高阶用法(动态SQL、OGNL、批量操作、片段重用、 SQL 组合、 执行优化、嵌套查询与延迟加载)
  • 出处不详 取数游戏
  • 拉取ros2_control_demos存储库
  • Apache Doris Flink Connector 24.0.0 版本正式发布
  • ‌语音控制小夜灯的实现方案介绍
  • 万龙觉醒免费辅助:VMOS云手机辅助巴克尔阵容搭配攻略!
  • 【English】长难句翻译
  • npm login 或者 npm publish 超时timeout
  • Python的openpyxl使用記錄(包含合併單元格,圖片下載和圖片插入,設置邊框,設置背景顏色)
  • 基于springboot+vue实现的在线商城系统
  • fastjson漏洞--以运维角度进行修复
  • 82页精品PPT | 构建数字化工厂的智能制造-数字化智能制造