如何使用uni-app在开发app中引入本地图片

在正式开前先给小伙伴们一个引入图片万能公式

import img from "@/assets/image/tupian.png" //图片路径

众所周知当我们在使用uni-app去开发应用时,不可避免的要去处理各平台的兼容问题，这里我们就展开小程序、H5、App如何引入本地资源展开，废话不多数，上代码！

一、在Vue2中

由于使用的构建工具是webpack，内置require引入文件的方式因此我们只需要

const img = require("@/assets/image/tupian.png") //图片路径

就可以轻松引入图片了。

二、在vue3中

由于使用的vite在开发时使用的Rollup进行打包，并没有内置类似webpack的require模块，因此需要我们自己手动的去引入图片到打包文件中

引入../../assets/image/workbench目录下，后缀为png的图片
const iconCatalogue = import.meta.glob(`../../assets/image/workbench/*.png`, { eager: true })//路径只能使用绝对路径

在此会给我们返回一个键名为绝对路径的对象

 其中返回的default属性就是我们引入图片对应打包后的路径了

const img = iconCatalogue['../../assets/image/workbench/chucai.png'].default