HarmonyOS web中展示富文本，如何控制里面图片的大小，让宽度占满，高度自适应

1、后端返回的富文本，里面的图片各种大小都有，需要前端来操作控制

2、如何控制web中图片的大小，让宽度占满，高度自适应

HarmonyOS

FengTianYa

1天前

浏览

回答 1

待解决

回答 1

按赞同

按时间

put_get

请参考以下示例：

Web({ src: '',
  controller: this.controller,
  renderMode:RenderMode.SYNC_RENDER
})
  .layoutMode(WebLayoutMode.FIT_CONTENT)
  .fileAccess(true)
  .domStorageAccess(true)
  .width('100%')
  .javaScriptAccess(true)
  .imageAccess(true)//是否允许自动加载图片资源，默认允许。
  .zoomAccess(true)
  .databaseAccess(false)//设置是否开启数据库存储API权限
  .verticalScrollBarAccess(false)



xQGET网络请求如下
//网络请求 演出详情
xQGET() {

  console.info("----------TAG",this.xqid)
  axios.get<string, AxiosResponse<string>, null>(API.getDetailfint, {
    params: {
      id: this.xqid + "",
      mid: this.mid
    }
  })
    .then((res: AxiosResponse) => { //getBody
      this.ycXqBean = JSON.parse(JSON.stringify(res.data).toString())

      if (this.ycXqBean?.code === 200) {
        this.xuanzuo = this.ycXqBean?.data?.seat === 0 ? '不支持选座' : '支持选座' + ' · '
        this.anquan = this.ycXqBean?.data?.is_refund === '否' ? '支持有条件退' : '该项目不可退款'
        this.anquan = this.anquan + ' · '
        this.anquan = this.anquan + this.ycXqBean?.data?.qupiaolei.replace(',', " · ") + ''
        //当前项目状态
        if (this.ycXqBean?.data?.spzt.length !== 0) {
          switch (this.ycXqBean?.data?.spzt) {
            case "售票中":
            case "预售":
              this.ziFu = '立即购票'
              break
            case "订金预售":
              this.ziFu = '立即购票'
              break
            default:
              this.ziFu = '开售提醒'
          }
        }

        //抢票倒计时
        if (this.ycXqBean?.data?.flash_sale > 0) {
          systemDateTime.getCurrentTime().then((time: number) => {
            if (this.ycXqBean?.data?.flash_sale * 1000 >
              time) {
              this.qiangPiao = true
            }
          })
        }

        let str = '<!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"> ' +
          '<style>'+
          'p {'+
          'word-break: break-all;'+
          '}'+
          ' </style>'+
          '</head>' +
          '<body>' +
          ' <font color = "#9E9D9B" size="3"><small>'+
          this.ycXqBean?.data?.body +
          '</small></font>'+
          '</body> ' +
          '<script>'+
          'function zhGetContentHeight() {'+
          'var height = document.body.clientHeight;'+
          'return height;'+
          '}'+
          'var imgs=document.getElementsByTagName("img");for(let t=0;t<imgs.length;t++){ imgs[t].style.width = "100%";imgs[t].style.height = "auto";}'+

          '</script>'+
          '</html>'

        this.controller.loadData(str,
          "text/html", "UTF-8", " ", " ");


        this.controllerXz.loadData("<font color = \"#9E9D9B\" size=\"3\"><small>"
          + this.ycXqBean?.data?.gpxz +
          "</small></font>", "text/html", "UTF-8", " ", " ");


      } else {
        promptAction.showToast({ message: '' + this.ycXqBean?.message })
      }

    }).catch((err: AxiosError) => {
    console.info("----xQGET:", err.message ? err.message : '')
  })
}

1天前

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS web中展示富文本，如何控制里面图片的大小，让宽度占满，高度自适应

订阅鸿蒙技术特刊，精选内容抢先看