HarmonyOS鸿蒙Next中RichEditor插入的网络图片带cooken不能显示出来只有占位，这种带cooken的要怎么显示在RichEditor里面

HarmonyOS鸿蒙Next中RichEditor插入的网络图片带cooken不能显示出来只有占位，这种带cooken的要怎么显示在RichEditor里面

RichEditor(this.options)
  .onReady((controller) => {
    this.controller.addImageSpan('https://counselorcat.wisedu.com/wec-im-message/proxy/file/UVEjTTkIO6O', {
      imageStyle: {
        size: [100, 100]
      }
    })
  })

更多关于HarmonyOS鸿蒙Next中RichEditor插入的网络图片带cooken不能显示出来只有占位，这种带cooken的要怎么显示在RichEditor里面的实战教程也可以访问 https://www.itying.com/category-93-b0.html

8 回复

cke_177.png

这边使用http下载，加入cookie，返回沙箱路径，在转化成文件路径，http加maxlimit可以保证下载图片不会因为图片过大无法显示，已解决。

更多关于HarmonyOS鸿蒙Next中RichEditor插入的网络图片带cooken不能显示出来只有占位，这种带cooken的要怎么显示在RichEditor里面的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


您好，addImageSpan该方法在文档中有明确说明，不建议添加网络图片：

cke_1080.png

如果你配置文件中注册了访问网络权限还是不显示，说明存在异常情况，可以将图片下载到沙箱后，在这里设置沙箱的路径，第一个参数的类型为PixelMap或者是ResourceStr类型，不支持网络地址的字符串，多尝试，总会有好的结果的，加油

找HarmonyOS工作还需要会Flutter的哦，有需要Flutter教程的可以学学大地老师的教程，很不错，B站免费学的哦：https://www.bilibili.com/video/BV1S4411E7LY/?p=17，

1.楼主可以先将图片下载出来保存到沙箱后再调用：

//下载图片的方法，需要改造

async downloadOnlineImage(netFile: ResourceStr, tempDir: string): Promise<DownloadResult> {
  let fileName = 'file' + Date.now();
  let tmpFile = `${tempDir}/${fileName}`;
  let imgMap: Record<string, number> = {};
  let httpRequest = http.createHttp();
  let imgFile: fileIo.File | '' = ''; // 初始值设置为 ''
  try {
    let data = await httpRequest.request(netFile.toString());
    if (data?.responseCode === http.ResponseCode.OK) {
      try {
        console.log("下载成功")
        imgFile = fileIo.openSync(tmpFile, fileIo.OpenMode.READ_WRITE | fileIo.OpenMode.CREATE);
        imgMap[fileName] = imgFile.fd;
        // 优化：将返回的图片映射赋值给 formData.formImages
        this.formImages[fileName] = imgFile.fd;
        let writeLen: number = await fileIo.write(imgFile.fd, data.result as ArrayBuffer);
        LogUtil.i(Tag, "write data to file succeed and size is:" + writeLen,
          'ArkTSCard download complete: %{public}s', tmpFile)
        return { tmpFile, fileName, imgMap };
      } catch (err) {
        LogUtil.e(Tag, "write data to file failed with error message: ", err)
        return { tmpFile: '', fileName: '', imgMap: {} };
      } finally {

      }
    } else {
      LogUtil.e(Tag, `ArkTSCard download task failed`)
      return { tmpFile: '', fileName: '', imgMap: {} };
    }
  } catch (error) {
    let errMsg = JSON.stringify(error);
    LogUtil.e(Tag, `HTTP request failed: ${errMsg}`)
    return { tmpFile: '', fileName: '', imgMap: {} };
  } finally {
    httpRequest.destroy();
    /*      if (imgFile) {
            fileIo.closeSync(imgFile.fd);
          }*/
  }
}

2.下载后再调用

RichEditor(this.options)
  .onReady((controller) => {
    this.controller.addImageSpan('替换为下载后的沙箱地址', {
      imageStyle: {
        size: [100, 100]
      }
    })
  })

RichEditor插入图片通常通过controller.addImageSpan方法，但参数可能只接受图片的URI，没有直接设置headers的选项。因此，需要通过其他方式处理。

现将图片下载然后再插入RichEditor

使用 request.downloadFile 接口下载图片时，在请求头中添加 Cookie：

import { request } from '@kit.NetworkKit';

// 下载图片到应用沙箱路径
let downloadTask = request.downloadFile({
  url: 'https://example.com/image.jpg',
  header: {
    Cookie: 'key=value' // 替换为实际 Cookie
  },
  filePath: '沙箱路径/image.jpg' // 指定本地保存路径
});

downloadTask.then((task) => {
  task.onSuccess = (result) => {
    // 下载成功，插入到 RichEditor
    this.controller.addImageSpan('沙箱路径/image.jpg');
  };
  task.onFail = (err) => {
    console.error('下载失败:', err);
  };
});

通过 RichEditorController 的 addImageSpan 方法插入本地路径：

import { RichEditorController } from '@kit.ArkUIKit';

@Component
struct RichEditorExample {
  controller: RichEditorController = new RichEditorController();

  build() {
    RichEditor({ controller: this.controller })
      .onReady(() => {
        // 插入本地图片（需等待下载完成）
        this.controller.addImageSpan('沙箱路径/image.jpg');
      })
  }
}

楼主试试这个方法，

首先在在module.json5中添加网络权限：

{
  "module": {
    "requestPermissions": [
      { "name": "ohos.permission.INTERNET" }
    ]
  }
}

使用@kit.NetworkKit发起带Cookie的请求，将图片转换为本地路径插入：

import { http } from '[@kit](/user/kit).NetworkKit';

// 步骤1：下载带Cookie的图片
async downloadImageWithCookie(url: string, cookie: string) {
  let request: http.HttpRequestOptions = {
    method: http.RequestMethod.GET,
    header: { 'Cookie': cookie }, // 附加Cookie
    connectTimeout: 60000,
    readTimeout: 60000
  };
  let response = await http.createHttp().request(url, request);
  if (response.responseCode === 200) {
    return response.result; // 获取二进制数据
  } else {
    console.error('Download failed:', response.responseCode);
    return null;
  }
}

// 步骤2：将图片数据转换为可插入格式
async loadImageToRichEditor() {
  let imageData = await this.downloadImageWithCookie(
    'https://counselorcat.wisedu.com/wec-im-message/proxy/file/UVEjTTkIO6O', 
    'your_cookie_here'
  );
  if (imageData) {
    // 方案A：保存为本地文件后引用
    let path = ...; // 存储到应用沙箱路径
    this.controller.addImageSpan(path, {
      imageStyle: { size: [100, 100] }
    });
    
    // 方案B：直接使用Base64数据
    let base64 = `data:image/jpeg;base64,${imageData.toString('base64')}`;
    this.controller.addImageSpan(base64, {
      imageStyle: { size: [100, 100] }
    });
  }
}

组件初始化时加载图片，原始代码改为：

RichEditor(this.options)
  .onReady(() => {
    this.loadImageToRichEditor(); // 替换原有的直接插入URL方式
  })

在HarmonyOS Next的RichEditor中显示带Cookie的网络图片，需使用ImageSpan配合自定义网络请求。通过HttpRequest设置请求头携带Cookie，获取图片数据后转换为PixelMap，再创建ImageSpan插入。关键步骤包括配置网络权限、实现异步加载和图片缓存处理。

在HarmonyOS Next的RichEditor中显示带Cookie的网络图片，需要通过自定义图片加载器实现。由于安全策略限制，RichEditor默认不会携带Cookie请求图片资源。

解决方案如下：

  1. 自定义ImageSpan加载器：
import { ImageSpan, ImageLoader } from '@ohos.richtext';

class CustomImageLoader implements ImageLoader {
  async loadImage(src: string): Promise<ImageSpan> {
    // 创建自定义请求，携带Cookie
    const request = new http.HttpRequest();
    request.header['Cookie'] = 'your_cookie_here';
    
    const response = await http.request(src, request);
    const imageData = response.result as ArrayBuffer;
    
    // 创建ImageSpan
    return new ImageSpan(imageData);
  }
}
  1. 在RichEditor中使用自定义加载器：
RichEditor(this.options)
  .imageLoader(new CustomImageLoader())  // 设置自定义加载器
  .onReady((controller) => {
    this.controller.addImageSpan('https://your-image-url', {
      imageStyle: {
        size: [100, 100]
      }
    })
  })
  1. 如果需要动态Cookie，可以从本地存储获取：
async loadImage(src: string): Promise<ImageSpan> {
  const cookie = await Preferences.get('user_cookie');
  const request = new http.HttpRequest();
  request.header['Cookie'] = cookie;
  
  // 其余加载逻辑...
}

关键点：

  • 必须实现ImageLoader接口的loadImage方法
  • 使用http模块发起带Cookie的请求
  • 将获取的二进制数据转换为ImageSpan
  • 通过imageLoader()方法设置到RichEditor

这种方式可以绕过默认加载器的限制，确保带Cookie的图片正常显示。注意处理网络请求异常和Cookie过期情况。

回到顶部