HarmonyOS 鸿蒙Next中photoViewPicker选择的图片,路径赋值给backgroundImage不展示

HarmonyOS 鸿蒙Next中photoViewPicker选择的图片,路径赋值给backgroundImage不展示 页面A通过PersistentStorage把路径存下来,在页面B读取存储的数据赋值给 backgroundImage,同时使用text组件展示路径。

选择图片后进页面B查看,背景图设置正确,text展示正确,但是把应用关掉重新打开后,背景图没了,但是text还展示上次选择的图片路径。

代码如下:

页面A(选择图片)

import { router, window } from '@kit.ArkUI'
import { photoAccessHelper } from '@kit.MediaLibraryKit';
import { BusinessError } from '@kit.BasicServicesKit';

const photoSelectOptions = new photoAccessHelper.PhotoSelectOptions();
photoSelectOptions.MIMEType = photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE; // 过滤选择媒体文件类型为IMAGE
photoSelectOptions.maxSelectNumber = 1; // 选择媒体文件的最大数目

@Entry
@Component
struct SetPage {
  @StorageLink('bgImage') bgImageUrl: string = ''
  @State setNameDialog: boolean = false

  @Builder
  ChatHead() {
    Row() {
      Image($r('app.media.arrow_left')).width(16).height(16)
        .onClick(() => {
          router.back()
        })
      Column() {
        Text('设置')
          .textAlign(TextAlign.Center).margin({ left: -16 })
      }
      .layoutWeight(1)
    }
    .width('100%')
    .justifyContent(FlexAlign.SpaceBetween)
    .alignItems(VerticalAlign.Top)
    .backgroundColor('#e5e5e3')
    .padding({
      top: Number(AppStorage.get('topHeight')) + 14,
      bottom: 14,
      left: 10,
      right: 10
    })
    .expandSafeArea()
  }

  build() {
    Stack({ alignContent: Alignment.Top }) {
      Column() {
        this.ChatHead()
        Text('选择聊天背景').width('100%').backgroundColor('#fff').padding({ left: 10, top: 16, bottom: 16 }).fontWeight(600)
          .onClick(() => {
            // 拉起系统图库
            let uris: Array<string> = [];
            const photoViewPicker = new photoAccessHelper.PhotoViewPicker();
            photoViewPicker.select(photoSelectOptions)
              .then((photoSelectResult: photoAccessHelper.PhotoSelectResult) => {
                uris = photoSelectResult.photoUris;
                this.bgImageUrl = uris[0]
                console.info('------选择的图片路径------' + this.bgImageUrl);
              })
              .catch((err: BusinessError) => {
                console.error(`Invoke photoViewPicker.select failed, code is ${err.code}, message is ${err.message}`);
              })
          }
        Divider().vertical(false).height(1).color('#f2f2f2')
        Text('修改名字')
          .width('100%')
          .backgroundColor('#fff')
          .padding({ left: 10, top: 16, bottom: 16 })
          .fontWeight(600)
          .onClick(() => {
            router.pushUrl({
              url: 'pages/SetNamePage'
            })
            // this.dialogY = 0
          })
      }
     }
    .height('100%')
    .backgroundColor('#e5e5e3')
  }
}

页面B(给背景图赋值)

cke_19810.png

cke_20680.png


更多关于HarmonyOS 鸿蒙Next中photoViewPicker选择的图片,路径赋值给backgroundImage不展示的实战教程也可以访问 https://www.itying.com/category-93-b0.html

6 回复

经过实际测试,在前置页面 SetProperty("bgImage", "") 后,预期正常,应用关闭后再打开,图片正常展示

更多关于HarmonyOS 鸿蒙Next中photoViewPicker选择的图片,路径赋值给backgroundImage不展示的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


我的还是不行,

对不起,您提供的HTML内容似乎不包含任何可转换为Markdown的结构或文本。根据您的要求,我将忽略所有与“复制”和“深色代码主题”相关的部分,并且不会显示标题“基本信息”。同时,由于没有提供具体的HTML代码,我也无法进行图片的识别和转换。

如果您能提供具体的HTML代码,我将很乐意帮助您完成转换。请确保包括所有的必要信息,以便我能准确地按照您的要求执行转换。

在HarmonyOS鸿蒙Next中,photoViewPicker选择的图片路径赋值给backgroundImage不展示,可能是由于以下原因:

  1. 路径格式问题:photoViewPicker返回的路径可能不符合backgroundImage要求的格式。确保路径是有效的URI或绝对路径。

  2. 资源未加载:图片资源可能尚未加载完成,导致无法立即展示。可以检查异步加载是否完成。

  3. 权限问题:应用可能没有读取存储或访问图片的权限。确保在config.json中声明了相应的权限。

  4. 图片格式不支持:backgroundImage可能不支持某些图片格式。确认图片格式是否为常见格式如PNG、JPEG等。

  5. UI组件未刷新:赋值后,UI组件可能未触发刷新。尝试手动调用刷新方法。

  6. 路径解析错误:鸿蒙系统可能无法正确解析返回的路径。检查路径是否包含特殊字符或非法字符。

  7. 资源管理器问题:鸿蒙的资源管理器可能未正确处理该路径。确保资源管理器已正确初始化并可用。

  8. API版本兼容性:photoViewPickerbackgroundImage的API版本可能不兼容。检查使用的API版本是否一致。

  9. 缓存问题:系统或应用缓存可能导致图片无法展示。尝试清除缓存后重新加载。

  10. 系统限制:鸿蒙系统可能对某些操作有限制,导致图片无法展示。检查系统日志以获取更多信息。

以上是可能导致photoViewPicker选择的图片路径赋值给backgroundImage不展示的原因。

在HarmonyOS鸿蒙Next中,如果通过photoViewPicker选择的图片路径赋值给backgroundImage后未展示,可能的原因包括:

  1. 路径格式问题:确保路径格式正确,通常为file://开头。
  2. 权限问题:检查是否已获取读取外部存储的权限。
  3. 资源加载问题:确认图片资源已正确加载,路径指向的图片存在且可访问。
  4. UI更新问题:确保赋值后UI已正确刷新。

建议使用Image组件并设置src属性来调试,确认图片是否能正常显示。若仍无法解决,建议检查日志或代码逻辑。

回到顶部