vue中如何动态引入图片
Vue 如何 图片 动态 引入
2023-09-11 14:19:39 时间
以下是直接读取某一文件夹下的图片,感觉挺好用,记录以下。
methods: { // 动态引入图标 loadMenuImgs() { let routeImgs = require.context("@/assets/icon/menu", false, /\.png$/); console.error(routeImgs); routeImgs.keys().forEach(item => { console.error("item", item); import("@/assets/icon/menu" + item.replace(".", "")).then(base64 => { let reg = /\.\/(.+)\.png/; let filename = reg.exec(item)[1]; this.$set(this.routeImgs, filename, base64); }); }); }, }
使用:
<img :src="routeImgs[list.itemName]">
。
相关文章
- 18-vue-cli脚手架项目中组件的使用
- import Vue from 'vue';
- 【Vue/Js】如何判断json对象为空或undefined未定义?(已解决)
- 【Vue/Js】如何解决谷歌浏览器(chrome)扩展插件安装后,再打开自动消失问题(两种解决方案)
- 【Vue】vue中VM的生命周期及加载和销毁实例
- 【css/vue】Vue组件中对body操作样式的一种解决方案
- 细说vue axios登录请求拦截器
- vue生成环境 访问路径配置
- vue中如何使用prismjs
- vue---axios的封装
- Vue如何自定义指令
- 前端vue如何对接接口,如何传参,传id,实现删除,父子组件传值等等功能?
- vue文档摘录九:Vue Router
- Vue的axios如何全局注册
- vue项目中如何封装api,使请求方法清晰,适合协作开发
- 浅析vue自定义插件的5种形式、如何使用插件、如何开发插件及开发实例
- Vue组件进阶知识总结
- 如何使用@vue/cli 3.0在npm上创建,发布和使用你自己的Vue.js组件库
- Vue 之 mockjs 结合 axios 在 vue 中的随机数据生成的简单使用
- Vue学习第27天——路由vue-router的详解及案例练习
- VUE 表单设计器
- Vue路由传递query参数的两种方式