首页 > 其他分享 >vite+vue3 import批量导入图片

vite+vue3 import批量导入图片

时间:2024-02-26 14:57:03浏览次数:41  
标签:批量 .. 导入 vue3 import vite

vite+vue3 import批量导入图片主要使用 “import.meta.glob”方法。具体使用如下:

1.const list = import.meta.glob("../../static/images/left-image/*.*", { eager: true })

2.imageList = Object.values(list).map((v: any) => v.default);

3.页面使用

 

 

 

标签:批量,..,导入,vue3,import,vite
From: https://www.cnblogs.com/xingqitian/p/18034338

相关文章

  • 详细vite创建vue3项目(vue3+vue-router+ts+vite+element-plus+pinia)
    详细vite创建vue3项目(vue3+vue-router+ts+vite+element-plus+pinia):https://blog.csdn.net/qq_44423029/article/details/126378199?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522170891147716800185818285%2522%252C%2522scm%2522%253A%252220140713.130102334..%2......
  • vue3+vite使用vue-pdf-embed或者pdf-vue3预览 PDF 文件(能躲避 XSS 攻击,需要 pdf 文件
    1.使用vue-pdf-embed1.npm安装所需插件[email protected]@0.1.62.封装组件(创建pdfPriview.index文件)<template><divclass="pdf-preview"> <vue-pdf-embed :source="state.source" v-for="pageinstate......
  • 使用defineAsyncComponent解决Vue3中的动态组件不显示问题
    参考:https://www.php.cn/faq/562208.html之前的写法<component:is='xxx'></component>异步加载组件<template><AsyncComponentv-if="item.data":key="item.data.comId"></AsyncComponent></template>&......
  • Vue3学习(十八) - TreeSelect 树选择
    写在前面本以为可以在家学习一天,结果家里来了客人拜年,就没学习上,有点小遗憾吧。昨天完成从分类管理的前后端代码复制出文档管理的前后端代码,遗留问题是只能选择一级父分类。值得说的是,昨晚的遗留的问题修复了,开心。遗留问题点击父文档,弹出警告,从报错来看那意思就是parent应该......
  • 【vue3】【router】跳转页面渲染两次问题
    最近做一款毕设遇到一个问题:如图所示部分是因为渲染了两次组件导致执行了两次onMounted加载了相同数据。 router.ts以下是我的路由相关配置: default布局:keepalive App.vue 最后导致这个原因正是因为布局组件default.vue和App.vue同时使用了keepalive,只要任意一边取消......
  • 【转载】docker save load export import区别详解
    【转载】dockersaveloadexportimport区别详解https://www.cnblogs.com/dingjiaoyang/p/16571840.html1、dockersave用来将一个或多个image打包保存。如:将本地镜像库中的image1和image2打包到images.tar中dockersave-oimages.tagimage1:v1image2:v1dockersave也可......
  • Vue3音乐播放器组件,可显示歌词
    在线体验地址音乐播放器1,安装npminstallapple-music-player或yarnaddapple-music-player2,在main.ts中引入import{createApp}from'vue'importAppfrom'./App.vue'importAppleMusicPlayerfrom'apple-music-player'createApp(App).use(......
  • vue3+elementplus+table动态列
    思路1.colsArr,用来渲染列表。dataList,用来渲染行数据2.循环colsArr,生成el-table-column3.数据格式如下colsArr:[{colName:'排名',key:'cols0'},{colName:'区域',key:'cols1'},{colName:&#......
  • vue3 使用 html5-qrcode 实现扫描二维码功能
    1.安装npm安装npminstall--save-devhtml5-qrcode或直接引入<scriptsrc="https://unpkg.com/html5-qrcode"type="text/javascript">2.引入根据需求自定义渲染QRscanningUI的容器。<divid="reader"width="600px"></div&......
  • vue3 ref 获取单个Dom及多个Dom
    获取单个Dom<inputtype="text"ref="inputRef"/>setup(){constinputRef=ref(null)onMounted(()=>{console.log(inputRef.value);})}获取多个Dom<divv-for="(item,index)instate.list":key=&quo......