uniapp+Vue3+Vite 实现动态访问静态图片（含微信小程序端） |
您所在的位置：网站首页 › vue动态加载本地图片 › uniapp+Vue3+Vite 实现动态访问静态图片（含微信小程序端） |
|
前言：在最近新起的项目中，用到了较新uniapp+vue3.2+vite，Vite的特性和 webpack 不一样 ，所以require 将不能使用 。 通过require动态引入， 发现报错：require is not defind，这是因为 require 是属于 Webpack 的方法 第一种方式（适用于单个资源文件） import homeBg from '/src/static/images/home/home_bg.png' 第二种方式（适用于多个资源文件，动态传入文件路径，不适用小程序端）new URL() + importa.url import { computed } from 'vue' let getAssetsImages = computed(() => (name, type = 'png') => { return new URL(`/static/images/home/${name}.${type}`, importa.url).href; //h5用法 })在微信小程序端调试了一下，因为new url相当于window.location.href，以至于小程序里是无法使用的~~~~ 第三种方式（适用于多个资源文件，这种方式引入的文件必须指定到具体文件夹路径，传入的变量中只能为文件名，不能包含文件路径，h5和微信小程序均适用） import { computed } from 'vue' let getAssetsImages = computed(() => (name, type = 'png') => { /** * 获取本地图 * @param name // 文件名 如 home-bg * @param type // 文件类型 如 png jpg * @returns {*|string} */ const path = `/src/static/images/home/${name}.${type}` const modules = importa.globEager('/src/static/images/home/*') return modules[path].default })/*importa.glob * 该方法匹配到的文件默认是懒加载，通过动态导入实现，构建时会分离独立的 chunk， 是异步导入，返回的是 Promise * /*importa.globEager * 该方法是直接导入所有模块，并且是同步导入，返回结果直接通过 for...in循环就可以操作*/ 使用background-image背景图属性引入1.官方文档说：支持 dase64 格式图片。 支持网络路径图片。40kb以下小图片推荐使用以 ~@ 开头的绝对路径；大图片推荐使用网络地址 。微信小程序不支持相对路径（真机不支持，开发工具支持） /* 推荐~@绝对路径引入 */ background-image: url("~@/static/images/home/home_bg.png"); |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |