uni-app开发APP如何引入本地图片

文
章
目
录

• 一、Vue2项目中引入本地图片
• 二、Vue3项目中引入本地图片

使用uni–app开发APP的过程中，引入本地图片是一项基础又关键的操作。今天就来给大家详细讲讲其中的门道，轻松掌握不同场景下的引入方法。在正式开始前，先给大家分享一个引入图片的通用办法：

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

不过呢，大家都知道，用uni-app开发应用，得处理好各平台的兼容问题，不同平台引入本地图片的方式也会有些差异。下面咱们就具体来看一看。

一、Vue2项目中引入本地图片

在Vue2的项目里，uni-app使用的构建工具是webpack。webpack内置了require这种引入文件的方式，所以引入本地图片就变得特别简单。只需要像下面这样写代码就行：

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

这么操作之后，就能顺利把图片引入到项目里啦，是不是很方便？

二、Vue3项目中引入本地图片

到了Vue3项目，情况就有点不一样了。uni-app在开发时使用vite进行构建，而vite打包用的是Rollup，它可没有像webpack那样内置require模块。这时候，就得手动把图片引入到打包文件里。比如说，想引入../../assets/image/workbench目录下所有后缀为.png的图片，可以这样写代码：

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

执行这段代码后，会返回一个对象，这个对象的键名是图片的绝对路径。具体长这样：

▼{
    ../../assets/image/workbench/baoxiao.png: Module,
    ././assets/image/workbench/chucai.png: Module,
    ./../assets/image/workbench/gonwen.png: Module,
    ../../assets/image/workbench/baoxiao.png: Module,
    ../../assets/image/workbench/chucai.png: Module {default: \"/assets/chucai.3df2b910.png\", Symbol(Symbol.toStringTag): \"Module\"},
    ../../assets/image/workbench/gonwen.png: Module {default: \"/assets/gonwen.c6cbe608.png\", Symbol(Symbol.toStringTag): \"Module\"},
    ../../assets/image/workbench/jiaban.png: Module {default: \"/assets/jiaban.5b4afd85.png\", Symbol(Symbol.toStringTag): \"Module\"},
    ../../assets/image/workbench/qingjia.png: Module {default: \"/assets/qingjia.1829ab86.png\", Symbol(Symbol.toStringTag): \"Module\"},
    [[Prototype]]: Object
}

这里面每个模块的default属性，就是对应图片打包后的路径。要是想用其中某一张图片，比如说chucai.png，就可以这样获取它的路径：

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

掌握了这些方法，不管是在Vue2还是Vue3的uni-app项目里，引入本地图片都不是难事啦！希望这篇文章能帮到正在用uni-app开发APP的小伙伴们，要是在实际操作过程中有任何问题，欢迎在评论区留言交流。