uniapp图片怎么分包

在使用 Uniapp 进行图片分包时，需要按照以下步骤进行：

1. 将需要分包的图片放入对应的文件夹中，例如将所有的商品图片放入一个名为 "goods" 的文件夹中。

2. 在 `manifest.json` 文件中添加分包配置，例如：

"subPackages": [
  {
    "root": "goods/",
    "name": "goods"
  }
]

3. 在需要使用分包中的图片的页面中，通过 `uni.loadSubPackage()` 方法加载分包，例如：

uni.loadSubPackage({
  name: 'goods',
  success: function () {
    console.log('分包加载成功')
  }
})

4. 在页面中使用分包中的图片时，需要将图片的路径指定为 `subPackages` 中定义的路径，例如：

<template>
  <img :src="'/subpackages/goods/' + goodsImgUrl" />
</template>

需要注意的是，分包功能只在 Uniapp 2.1.0 及以上版本中支持。

相关问题

uniapp小程序分包图片压缩

UniApp是一个跨平台的开发框架，可以同时开发iOS、Android和Web等多个平台的应用程序。在UniApp中，可以使用分包的方式来进行图片压缩。

分包是指将应用程序的资源文件按照一定的规则进行拆分，使得应用程序在运行时可以按需加载资源，从而减少应用程序的体积和加载时间。在UniApp中，可以将图片资源放置在不同的分包中，并使用压缩算法对图片进行压缩。

以下是一种常见的分包图片压缩的方法：

1. 将需要压缩的图片放置在一个独立的文件夹中，例如"compress_images"。
2. 在UniApp的manifest.json文件中配置分包信息，指定该文件夹为一个独立的分包。

   "subPackages": [
     {
       "root": "compress_images",
       "name": "compress",
       "pages": [
         "index"
       ]
     }
   ]

3. 在需要使用压缩图片的页面中引入该分包。

   import { uniSubpackage } from '@/utils/uni-subpackage';

   uniSubpackage('compress');

4. 在需要使用压缩图片的页面中，使用uni.compressImage接口对图片进行压缩。

   uni.compressImage({
     src: 'compress_images/image.jpg',
     quality: 80,
     success: function(res) {
       console.log('压缩后的图片路径：', res.tempFilePath);
     }
   });

通过以上步骤，可以将需要压缩的图片放置在一个独立的分包中，并在需要使用压缩图片的页面中进行压缩操作。这样可以有效减小应用程序的体积，并提升加载速度。

uniapp 多个分包

在uniapp中，可以通过配置多个分包来实现项目的分包效果。在项目代码的subPackages配置中，可以使用相对路径来指定每个分包的路径，而不是使用全路径。在微信、百度小程序中，每个分包的大小不能超过2M，总体积一共不能超过8M。而在支付宝小程序中，每个分包的大小也不能超过2M，总体积也不能超过8M。在构建小程序分包项目时，会输出一个或多个分包。每个有分包的小程序必定含有一个主包，通常在主包下放置默认启动页面及tabBar页面，以及一些所有分包都需要用到的公共资源，如自定义组件、js工具代码和图片等。而分包则根据开发者的配置进行划分。在微信小程序中，整个小程序所有分包大小不超过20M，单个分包/主包大小不能超过2M。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [uniapp分包demo](https://download.csdn.net/download/zou__qi/13084976)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
- *2* *3* [uniapp-小程序分包详解](https://blog.csdn.net/u013180541/article/details/120264464)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]