小程序
小游戏
企业微信
微信支付
扫描小程序码分享
下面代码是分包文件夹swPackages→projectlist→project.vue文件的代码:无论是按照第一种还是第二种都提示找不到图片!
//① <image src="/swPackages/images/empty.png"></image> //② <image src="../images/empty.png"></image>
6 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
我这边使用的是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>
你好,麻烦通过点击下方“反馈信息”按钮,提供出现问题的。
onLoad的时候,定义成变量,用require引入,this.imgUrl = require("../../images/ceshi.png")
丢服务器上呗 还分包干嘛
你用的uniapp项目吗?新建一个项目,看看他们本地的图片路径怎么写的吧
静态资源,放远程服务器上面,或者 第三方云存储上面
本回答由AI生成,可能已过期、失效或不适用于当前情形,请谨慎参考
关注后,可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
我这边使用的是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>onLoad的时候,定义成变量,用require引入,this.imgUrl = require("../../images/ceshi.png")
丢服务器上呗 还分包干嘛
你用的uniapp项目吗?新建一个项目,看看他们本地的图片路径怎么写的吧
静态资源,放远程服务器上面,或者 第三方云存储上面