网络请求结果返回的是一张图片,请问下应该怎么把返回的图片直接放到img中显示?

网络请求结果返回的是一张图片,请问下应该怎么把返回的图片直接放到img中显示?

HarmonyOS
2024-11-11 09:47:13
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
zbw_apple

​Image组件是可以加载网络gif图片的,需要在module.json5中添加网络权限,ohos.permission.INTERNET如下示例:

Image(‘https://www.example.com/example.JPG’)  // 实际使用时请替换为真实地址

接口返回的result并非图片buffer,使用OutData.result作为buffer转成imageSource后,无法获取pixelMap图片;可以先使用文件下载能力将接口返回的图片保存到本地之后再使用Image组件展示,具体demo如下:​

import { BusinessError, request } from '@kit.BasicServicesKit'; 
import { fileIo, fileUri } from '@kit.CoreFileKit'; 
import { image } from '@kit.ImageKit'; 
@Entry 
@Component 
struct DownLoadFileDemo { 
  @State imageUrl: PixelMap | string | undefined = undefined; 
  @State imageUrl1: PixelMap | string | undefined = undefined; 
  build() { 
    Column({ space: 20 }) { 
      Button("获取网络图片").onClick(() => { 
        this.downloadFile() 
      }) 
      Image(this.imageUrl).height(100).width(100).objectFit(ImageFit.Contain) 
      Image(this.imageUrl1).height(100).width(100).objectFit(ImageFit.Contain) 
    }.width('100%').height('100%') 
  } 
  downloadFile() { 
    let tempPath = getContext(this).filesDir + '/' + new Date().getTime() + '.gif'; 
    try { 
      request.downloadFile(getContext(this), { 
        // 通过request.downloadFile方法下载到本地之后展示 
        url: "https://xxx.huawei.com.cn/app/captcha?temp=xxx", 
        header: { 'deviceid': '64315FDxxxB0D0AF3A5CB' }, 
        filePath: tempPath 
      }).then((downloadTask: request.DownloadTask) => { 
        downloadTask.on('complete', async () => { 
          console.info('download complete'); 
          // 方式一:直接使用本地uri展示 -- 可以展示gif动态效果 
          this.imageUrl = fileUri.getUriFromPath(tempPath); 
          // 方式二:本地文件转为pixelMap展示 
          let file = fileIo.openSync(tempPath, fileIo.OpenMode.READ_ONLY); 
          let imageSource: image.ImageSource = image.createImageSource(file.fd); 
          let opts: image.InitializationOptions = { 
            editable: false, 
            pixelFormat: image.PixelMapFormat.RGBA_8888, 
            alphaType: 0, 
            size: { height: 100, width: 100 } 
          } 
          this.imageUrl1 = await imageSource.createPixelMap(opts); 
        }) 
      }).catch((err: BusinessError) => { 
        console.error(`Invoke downloadTask failed, code is ${err.code}, message is ${err.message}`); 
      }); 
    } catch (error) { 
      console.error(`Invoke downloadFile failed, error is ${JSON.stringify(error)}`); 
    } 
  } 
}
分享
微博
QQ
微信
回复
2024-11-11 16:08:07
相关问题
如何吸取一张图片色值?
388浏览 • 1回复 待解决
如何保存一张PNG图片到相册
1843浏览 • 1回复 待解决
如何将一张图片转化为PixelMapElement
10011浏览 • 1回复 待解决
请问下HarmonyOS怎么文件分片?
532浏览 • 1回复 待解决