Zepp OS API Level 2：如何用FetchApi获取图片并展示在IMG组件？

实现思路 #

Zepp OS的IMG组件无法直接加载远程URL图片，必须先通过FetchApi拉取图片的二进制数据，转换为Base64格式后，再赋值给IMG组件的src属性。

具体步骤 #

1. 配置网络权限 #

先在app.json中声明网络权限，确保应用能发起网络请求：

{
  "permissions": ["internet"]
}

2. 用FetchApi拉取图片二进制数据 #

调用fetch时必须指定responseType: 'arraybuffer'，才能拿到图片的原始二进制内容：

async function fetchRemoteImage() {
  try {
    const res = await fetch('https://docs.zepp.com/img/logo.png', {
      method: 'GET',
      responseType: 'arraybuffer'
    });

    if (res.ok) {
      const buffer = await res.arrayBuffer();
      const base64Str = arrayBufferToBase64(buffer);
      renderImage(base64Str);
    } else {
      console.log(`图片请求失败，状态码: ${res.status}`);
    }
  } catch (err) {
    console.error('请求出错:', err);
  }
}

3. 将ArrayBuffer转换为Base64 #

Zepp OS环境支持btoa方法，但需要先把ArrayBuffer转成Uint8Array再转换为字符串：

function arrayBufferToBase64(buffer) {
  const uint8 = new Uint8Array(buffer);
  let binaryStr = '';
  const length = uint8.byteLength;
  for (let i = 0; i < length; i++) {
    binaryStr += String.fromCharCode(uint8[i]);
  }
  return btoa(binaryStr);
}

4. 在IMG组件中展示图片 #

先创建IMG组件实例，拿到Base64后给src加上对应图片类型的前缀，再更新组件属性：

let imgWidget = null;

Page({
  build() {
    // 创建IMG组件，初始src为空
    imgWidget = hmUI.createWidget(hmUI.widget.IMG, {
      x: 20,
      y: 20,
      w: 120,
      h: 120,
      src: ''
    });
    // 发起图片请求
    fetchRemoteImage();
  }
});

function renderImage(base64) {
  // 根据图片类型调整前缀，此处为PNG格式
  imgWidget.setProps({
    src: `data:image/png;base64,${base64}`
  });
}

注意事项 #

• 图片类型要对应Base64前缀：JPG用data:image/jpeg;base64,，GIF用data:image/gif;base64,
• 图片尺寸需适配设备屏幕，避免超出显示区域
• 网络请求必须放在异步函数中，避免阻塞UI线程
• 务必添加异常捕获，处理无网络、图片不存在等异常情况

内容的提问来源于stack exchange，提问作者user6310717