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

最新推荐文章于 2025-09-20 12:48:06 发布

原创最新推荐文章于 2025-09-20 12:48:06 发布 · 3.2k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app

uniapp 专栏收录该内容

3 篇文章

订阅专栏

这篇博客介绍了如何在前端项目中使用uParse插件显示富文本，并解决了因图片路径导致的显示问题。提供了两种解决方案：一是通过修改u-parse源码中的urlToHttpUrl方法来更改默认请求头；二是直接在前端替换富文本中图片的URL。内容包括插件安装、前端配置、样式导入以及问题解决方案的详细步骤。

官方教程地址：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 对象具体属性

名称	类型	默认值	描述
mode	String	‘aspectFit’	图片裁剪、缩放的模式
padding	Number	0	图片内边距
lazyLoad	Boolean	false	图片懒加载
domain	String	‘’	图片服务域名

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);