uni-app uParse插件导入使用步骤以及默认图片地址默认请求https修改http

官方教程地址：https://ext.dcloud.net.cn/plugin?id=183

一.插件部分添加

1.官网下载插件

2.将解压的插件源码粘贴到项目目录components

二.前端配置导入

1.添加前端html部分

<view>
	<div>
	<uParse  :content="news" :imageProp="imageProp" @preview="preview"  @navigate="navigate" />
	</div>
</view>

2.添加引用

import uParse from '@/components/u-parse/u-parse.vue'
	export default {
		components: {
		    uParse,		   
		  },
		data() {
			return {
			    news:'<div>我是HTML代码</div>',
				imageProp:{
					mode:'aspectFit',
					padding:20,
					lazyLoad:false,
					domain:"192.168.1.201:8080"
				},
			}
		},

imageProp为富文本图片属性设置

imageProp:{
mode:‘aspectFit’,
padding:20,
lazyLoad:false,
domain:“192.168.1.201:8080”
},

imageProp 对象具体属性

3.样式导入

<style>
 @import url("@/components/u-parse/u-parse.css");
</style>

三、使用遇到的小问题
显示富文本图片出现路径问题两个解决方案：
第一种方案：
1.使用imageProp
imageProp:{
domain:“192.168.1.201:8080”
},
在设置富文本显示属性时domain 默认的请求头是https:
默认地址是：

https://192.168.1.201:8080

而我需要的地址是

http://192.168.1.201.8080

这里我们就需要到源码中去修改配置了
路径：u-parse —— libs —— wxDiscode
下修改urlToHttpUrl方面组合方式

function urlToHttpUrl(url, domain) {
  if (/^\/\//.test(url)) {
    return `https:${url}`;
  } else if (/^\//.test(url)) {
    return `https://${domain}${url}`;
  }
  return url;
}

改为

function urlToHttpUrl(url, domain) {
  if (/^\/\//.test(url)) {
    return `http`在这里插入代码片`:${url}`;
  } else if (/^\//.test(url)) {
    return `http://${domain}${url}`;
  }
  return url;
}

第二种方案：
直接暴力修改富文本中图片地址路径

var newContent= content.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi,function(match,capture){
  //capture,返回每个匹配的字符串
        var newStr='<img src="http://192.168.1.201.8080'+capture+'" alt="" />';
         return newStr;
  });
   console.log(newContent);

方法二转自：https://blog.csdn.net/burongwawa520/article/details/46562015