最近用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: {
}
},
//其它配置
}
//其它配置
})
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目录。
我们就可以在页面文件中使用了：
<Image src="/images/logo.png" />
