uniapp使用v-html调用接口，富文本图片视频自适应大小

在uniapp中使用v-html渲染接口返回的富文本内容时，为了使得图片和视频能够自适应大小，可以使用web-view组件嵌入一个独立的网页环境，并在这个环境中加载富文本内容。

以下是一个简单的示例：

接口返回的富文本数据中的图片和视频标签需要正确，并确保图片标签包含width和height属性。
在页面中使用web-view组件，并为其指定一个src属性，该属性是一个网页地址，可以是本地的HTML文件，也可以是远程的网页地址。




<template>
  <view>
    <web-view src="/path/to/your/html/file.html"></web-view>
  </view>
</template>

创建一个本地HTML文件，例如file.html，并在其中使用JavaScript动态地设置富文本内容。




<!-- file.html -->
<!DOCTYPE html>
<html>
<head>
  <title>Rich Content</title>
  <style>
    img, video {
      max-width: 100%;
      height: auto;
    }
  </style>
</head>
<body>
  <div id="content"></div>
  <script>
    // 假设 `getContent` 是一个函数，用来获取富文本内容
    document.getElementById('content').innerHTML = getContent();
 
    function getContent() {
      // 这里应该是调用接口获取内容的代码，并返回富文本字符串
      // 示例：return '<p>Rich <strong>text</strong> with <img src="..." /> and <video src="..." /></p>';
    }
  </script>
</body>
</html>

在你的uniapp页面的onReady生命周期钩子中，调用接口获取富文本内容，并通过JavaScript更新HTML文件中的内容。




export default {
  onReady() {
    // 调用接口获取富文本内容
    this.getRichContent().then(content => {
      // 通过web-view与HTML文件通信，更新内容
      const webView = this.$scope.$getAppWebview();
      const iframe = webView.children()[0];
      const invokeWebviewMethod = iframe.invokeWebviewMethod;
      invokeWebviewMethod('setContent', content);
    });
  },
  methods: {
    getRichContent() {
      // 这里应该是用来调用接口的代码，并返回富文本内容的Promise
      // 示例：return Promise.resolve('<p>Rich <strong>text</strong> with <img src="..." /> and <video src="..." />');
    }
  }
}

请注意，这个示例假设你已经有了获取富文本内容的API，并且你的uniapp页面已经正确地配置了web-view组件。此外，由于uniapp的安全策略，可能需要配置合适的scheme等，以确保web-view能够正确加载和渲染内容。

uniapp使用v-html调用接口，富文本图片视频自适应大小

评论已关闭

推荐阅读