Image组件设置alt预览图和ImageFit.Fill后,网络图片加载出来后尺寸还是预览图的尺寸?

HarmonyOS Image组件设置alt预览图和ImageFit.Fill后,网络图片加载出来后尺寸还是预览图的尺寸,没有变成加载后图片的尺寸。


HarmonyOS
2024-10-17 10:28:29
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
superinsect

目前alt暂时不能直接设置。可以通过对应的事件方法控制显示不同的ImageFit属性。参考链接:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-image-V5#oncomplete

问题未复现,可以尝试如下代码验证:

@Entry  
@Component  
struct Index {  
  @State imgFit: ImageFit = ImageFit.Auto;  
  build() {  
    Row() {  
      Column({ space: 10 }) {  
        Text("========ScaleDown========")  
        Image("http://nsp-contentcenter-h5-drcn.obs.cn-north-2.myhuaweicloud.cn/hwread_audiobook_1_1/96/v3/jabvW5fiTou8Fn1-_dxKQA/XX3DP1-pSzm8hwUYoex1QQ.webp")  
          .objectFit(ImageFit.ScaleDown)  
          .backgroundColor(0xCCCCCC)  
          .width(100)  
          .height(100)  
        Text("========Fill========")  
        Image("http://nsp-contentcenter-h5-drcn.obs.cn-north-2.myhuaweicloud.cn/hwread_audiobook_1_1/96/v3/jabvW5fiTou8Fn1-_dxKQA/XX3DP1-pSzm8hwUYoex1QQ.webp")  
          .objectFit(ImageFit.Fill)  
          .backgroundColor(0xCCCCCC)  
          .width(100)  
          .height(100)  
        Text("========Auto========")  
        Image("http://nsp-contentcenter-h5-drcn.obs.cn-north-2.myhuaweicloud.cn/hwread_audiobook_1_1/96/v3/jabvW5fiTou8Fn1-_dxKQA/XX3DP1-pSzm8hwUYoex1QQ.webp")  
          .objectFit(ImageFit.Auto)  
          .backgroundColor(0xCCCCCC)  
          .width(100)  
          .height(100)  
        Text("========测试代码=======")  
        Image("http://nsp-contentcenter-h5-drcn.obs.cn-north-2.myhuaweicloud.cn/hwread_audiobook_1_1/96/v3/jabvW5fiTou8Fn1-_dxKQA/XX3DP1-pSzm8hwUYoex1QQ.webp")// .objectFit(this.imgFit)  
          .objectFit(this.imgFit)  
          .backgroundColor(0xCCCCCC)  
          .alt($rawfile('loading.gif'))  
          .onComplete((value) => {  
            console.info("加载完成!" + JSON.stringify(value))  
            this.imgFit = ImageFit.Fill;  
          })  
          .width(100)  
          .height(100)  
      }  
      .height('100%')  
    }  
    .width('100%')  
  }  
}

Image组件宽高不受.alt() 占位图的影响,宽高就是组件本身的.width( ) .height( )。如果需要动态修改image组件的宽高,定义参数为@state修饰的参数作为入参传入。

分享
微博
QQ
微信
回复
2024-10-17 17:46:41
相关问题
如何获取网络图片尺寸
334浏览 • 1回复 待解决
如何实现图片预览效果
1799浏览 • 1回复 待解决
Image组件如何加载网络图片
2452浏览 • 1回复 待解决
关于Image组件加载网络图片问题
391浏览 • 1回复 待解决
Image组件如何设置默认
909浏览 • 1回复 待解决
HarmonyOS Image 加载网络图片问题
499浏览 • 1回复 待解决
png图片使用Image组件加载出现锯齿
1696浏览 • 1回复 待解决
HarmonyOS Image组件网络图片不显示
243浏览 • 1回复 待解决
HarmonyOS Image组件无法显示网络图片
713浏览 • 1回复 待解决
如何设置组件尺寸范围?
310浏览 • 1回复 待解决