HarmonyOS鸿蒙Next中WebView的CSS样式中的图片url如何替换成本地的图片

HarmonyOS鸿蒙Next中WebView的CSS样式中的图片url如何替换成本地的图片 在加载Html的时候，需要加载CSS样式。其中，有一段CSS样式是用图片绘制的，采用的url链接地址，即下面代码中的：background: url(http://xxx.com/resource/image/dot.png)。代码截取如下：

font::before {
  position: absolute;
  content: '';
  width: 100%;
  height: 4px;
  bottom: -4px;
  left: 0;
  background: url(http://xxx.com/resource/image/dot.png) repeat-x 0 center;
}

但经常会遇到一些情况，这个url地址加载的图片无法显示出来。有两种方案，其一是替换图片为CSS指令绘制的方式。另一种方案是替换为本地图片。

我现在想咨询一下，如何将代码中url加载的这个图片，替换使用本地图片。类似这样 background: url(resouce://rawfile/img/dot.png)


更多关于HarmonyOS鸿蒙Next中WebView的CSS样式中的图片url如何替换成本地的图片的实战教程也可以访问 https://www.itying.com/category-93-b0.html

6 回复

能不能把本地图片转 base64， 然后通过 h5 调鸿蒙的方式，在网页初始化时把图片传过去实现替换

更多关于HarmonyOS鸿蒙Next中WebView的CSS样式中的图片url如何替换成本地的图片的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


你的HTML是在线网页吧，如果是本地HTML还有可能使用本地资源图片：

本地资源文件应存放在模块的“src/main/resources/rawfile”文件夹下，可通过 $rawfile(‘文件名’) 访问。

import { webview } from '@kit.ArkWeb';
@Entry
@Component
struct WebComponent {
  controller: webview.WebviewController = new webview.WebviewController();
  build() {
    Column() {
      Web({ src: $rawfile('index.html'), controller: this.controller })
        .javaScriptAccess(true)
    }
  }
}

要么你就使用web组件的请求拦截功能：

onInterceptRequest

当Web组件加载URL之前触发该回调，用于拦截URL并返回响应数据。onInterceptRequest可拦截所有跳转请求并返回响应数据，但无法访问POST请求体（Body）内容，且不支持分片缓冲（buffer）类型数据获取。此类场景需改用WebSchemeHandler实现，依据具体业务需求进行判断。

拦截并替换你的本地图片资源。

CSS样式是客户端的写死代码，这种场景下既然可以编辑CSS样式了，是否可以直接像我问题中描述的编写呢，我看android原生就可以类似方案，直接修改CSS样式代码，直接替换为本地的图片地址加载，

理论上可行，需要你再仔细调整一下参数，毕竟H5是不能随便访问APP内的图片资源的。

在HarmonyOS Next中，WebView的CSS样式内图片URL替换为本地图片，可通过使用resource://协议或file://协议实现。将图片放入应用的resources目录下，在CSS中使用url('resource://[图片路径]')或url('file://[本地绝对路径]')引用。需确保路径正确且应用具备文件访问权限。

在HarmonyOS Next中，WebView加载的CSS样式里引用本地图片，可以通过resource://rawfile/协议来实现。具体步骤如下：

  1. 将图片资源放入项目目录：将你的dot.png图片文件放置在工程的resources/rawfile目录下（如果没有该目录则需手动创建）。这是HarmonyOS应用访问本地资源的默认路径。

  2. 在CSS中修改URL：将CSS代码中的网络URL替换为本地资源路径。例如：

    background: url(resource://rawfile/dot.png) repeat-x 0 center;

    注意路径中不需要包含img等子目录名，除非你在rawfile下建立了子文件夹。如果图片放在rawfile/img/下，则路径应为resource://rawfile/img/dot.png。

  3. 确保WebView启用本地访问：在加载HTML内容时，需通过WebView的loadData()或loadUrl()方法加载，并确保允许访问本地资源。如果使用loadData()加载HTML字符串，可能需要设置基础URL以解析相对路径：

    webView.loadData(htmlContent, 'text/html', 'UTF-8', 'resource://rawfile/');

  4. 注意事项：

    • 图片格式需为Web标准格式（如PNG、JPEG）。
    • 路径区分大小写，需与文件名完全匹配。
    • 如果CSS通过外部文件引入，需确保该CSS文件同样能通过resource://rawfile/协议访问。

这种方法直接替换URL，无需修改CSS绘制逻辑，适用于需保持原有样式的场景。

回到顶部