收藏
回答

小程序开发,静态资源能分包吗?如何分包?为什么官方给的优化帖子中没有看到关于静态资源分包的内容?

下面代码是分包文件夹swPackages→projectlist→project.vue文件的代码:无论是按照第一种还是第二种都提示找不到图片!

//①
<image src="/swPackages/images/empty.png"></image>

//②
<image src="../images/empty.png"></image>
回答关注问题邀请回答
收藏

6 个回答

  • yikoyu
    yikoyu
    01-15

    我这边使用的是uniapp + @uni-ku/bundle-optimizer 可以实现资源分包。(原生也行,应该需要分包异步化

    由于 主包可正常引用分包组件,不可直接引用分包静态资源,不能直接引用分包资源,需要在分包内封装一个组件,目录结构如下

    packages/sub-static
    ├── _components  // 新增:分包组件目录
    │   └── StaticImage.vue
    ├── index.vue
    └── static
        └── avatar.png  // 分包内需要被主包引用的静态图片
    


    StaticImage.vue 组件代码

    <!-- packages/sub-static/_components/SharedImage.vue -->
    <script setup lang="ts">
    import type { ImageMode, ImageOnError, ImageOnLoad } from '@uni-helper/uni-types'
    
    import type { StyleValue } from 'vue'
    import { computed, defineProps } from 'vue'
    
    /**
     * 引入分包本地图片(组件和图片在同一分包,可正常引用)
     * 主包应用分包图片,即使设置了 preloadRule 也会出现 图片无法显示问题
     */
    import AvatarPng from '../static/avatar.png'
    // 若有多个图片,可在这里统一引入,或通过props传递图片名称匹配
    
    const props = defineProps<{
      imageType: ImageSrcType
      mode?: ImageMode
      lazyLoad?: boolean
      fadeShow?: boolean
      webp?: boolean
      showMenuByLongpress?: boolean
      draggable?: boolean
      onError?: ImageOnError
      onLoad?: ImageOnLoad
      customClass?: any
      customStyle?: StyleValue
    }>()
    
    type ImageSrcType = 'AvatarPng'
    
    // 计算图片地址(匹配不同图片)
    const imageSrc = computed(() => {
      const _imageType = {
        AvatarPng,
        default: '',
      }
    
      return _imageType[props.imageType] || _imageType.default
    })
    </script>
    
    <template>
      <image
        :src="imageSrc"
        :image-type="imageType"
        :mode="mode"
        :lazy-load="lazyLoad"
        :fade-show="fadeShow"
        :webp="webp"
        :show-menu-by-longpress="showMenuByLongpress"
        :draggable="draggable"
        :on-error="onError"
        :on-load="onLoad"
        :class="customClass"
        :style="customStyle"
      />
    </template>
    


    主包页面引用

    <script lang="ts" setup>
    import StaticImage from '@/packages/sub-static/_components/StaticImage.vue'
    
    defineOptions({
      componentPlaceholder: {
        StaticImage: 'view',
      },
    })
    
    definePage({
      type: 'home',
      layout: 'tabbar',
      style: {
        navigationBarTitleText: '',
        navigationStyle: 'custom',
      },
    })
    </script>
    
    <template>
      <StaticImage image-type="AvatarPng" custom-class="h-18 w-18 rounded-full" />
    </template>
    


    01-15
    有用 1
    回复 1
    • yikoyu
      yikoyu
      01-15
      直接设置首屏preloadRule引用分包图片,会出现首屏资源不显示问题。所以才使用分包组件的方案
      01-15
      回复
  • hυι
    hυι
    01-22

    onLoad的时候,定义成变量,用require引入,this.imgUrl = require("../../images/ceshi.png")

    01-22
    有用
    回复 1
    • 台灯
      台灯
      02-22
      没用
      02-22
      回复
  • Passerby
    Passerby
    2025-09-06

    丢服务器上呗 还分包干嘛

    2025-09-06
    有用
    回复
  • 启年
    启年
    2025-09-06

    你用的uniapp项目吗?新建一个项目,看看他们本地的图片路径怎么写的吧

    2025-09-06
    有用
    回复
  • 玛卡巴卡
    玛卡巴卡
    2025-09-06

    静态资源,放远程服务器上面,或者 第三方云存储上面

    2025-09-06
    有用
    回复 1
    • Mu、
      Mu、
      2025-09-08
      组件呢, 可以分包不
      2025-09-08
      回复
  • 智能回答 智能回答 本次回答由AI生成
    2025-09-06
    有用
登录 后发表内容