HarmonyOS 鸿蒙Next：h5通过webview如何展示处理file://这种图片地址

发布于 1周前 作者 itying888 来自 鸿蒙OS

HarmonyOS 鸿蒙Next：h5通过webview如何展示处理file://这种图片地址

photopicker获取的file://路径图片，h5上要怎么处理才能正常显示？

<img

// src={src}

src={‘file://com.js.tuud/data/storage/el2/base/haps/entry/cache/1721468687175.png’}

style={{ width: 300, height: 100 }}

/>

使用photopicker方式获取的图片绝对地址：

let PhotoSelectOptions = new picker.PhotoSelectOptions();
PhotoSelectOptions.MIMEType = picker.PhotoViewMIMETypes.IMAGE_TYPE;
PhotoSelectOptions.maxSelectNumber = 1;
let photoPicker = new picker.PhotoViewPicker(context);
let res = await photoPicker.select(PhotoSelectOptions);

…

Harmonyos Next教程
4 回复
解决了吗？我这边使用fs后地址为/data/storage/el2/base/haps/entry/类型的 html怎么展示？

可以先将图片路径转换为相对路径，然后通过本地服务器提供访问，在H5页面中使用HTTP URL来访问图片。

const imagePath = 'file://com.js.tuud/data/storage/el2/base/haps/entry/cache/test.png';
const serverURL = ‘http://localhost:8000/images/’;
const relativePath = imagePath.replace(‘file://com.js.tuud/data/storage/el2/base/haps/entry/cache/’, ‘’);
const imageURL = serverURL + relativePath;
//显示图片
const imgElement = document.createElement(‘img’);
imgElement.src = imageURL;
imgElement.style.width = ‘300px’;
imgElement.style.height = ‘100px’;
document.body.appendChild(imgElement);

在HarmonyOS的WebView中展示file://类型的图片地址，你通常需要确保WebView已经配置为允许访问本地文件系统。这通常涉及到WebView的设置，如启用JavaScript和允许文件访问。

你可以在加载WebView内容之前，使用WebView的设置API来配置这些选项。例如，确保启用了JavaScript支持，并检查是否有相关的设置来允许文件访问。但需要注意的是，由于HarmonyOS和Android在某些API细节上可能存在差异，你应该参考最新的HarmonyOS开发者文档。

如果HarmonyOS的WebView API直接不支持file://访问，你可能需要考虑将图片资源通过应用内部的其他方式（如Base64编码、转换成Blob等）提供给WebView。

HarmonyOS 鸿蒙Next在线学习地址：https://www.bilibili.com/video/BV1fw2ZYSEk2

配套课件及涉及源码网盘下载地址：http://bbs.itying.com/topic/6568836e6a4621002b88a6f6

回到顶部