神创天陆活动专区

taro怎么引入本地图片,taro无法使用本地图片的解决办法

最近用taro开发小程序,遇到一个问题,无法引入本地图片,只能使用网络图片。我发现taro在编译运行的时候,不会将本地图片编译到小程序输出目录。

有两种解决办法,一种是手动复制图片目录到小程序输出目录dist中,这种操作比较麻烦。

还有一种方法是,使用taro自带的copy来自动复制,我们在项目根目录下新建一个public目录,把图片放在public/images目录下。

在 Taro 项目的配置文件 config/index.js 中,添加copy的配置。以下是一个完整的配置示例:

import path from 'path';

export default defineConfig<'vite'>(async (merge, { command, mode }) => {

const baseConfig: UserConfigExport<'vite'> = {

//其它配置

copy: {

patterns: [

{

from: path.resolve(__dirname, '..', 'public'), // 静态资源所在目录

to: path.resolve(__dirname, '..', 'dist'), // 输出目录

},

],

options: {

}

},

//其它配置

}

//其它配置

})

如下图所示:

这样配置后,taro每次会在编译时把public目录下的所有目录和文件复制到dist目录下,这样dist目录下也就有了images目录。

我们就可以在页面文件中使用了: