首先需要下载插件

                 https://github.com/dcloudio/uParse

存放插件

   存放到项目自定的目录中

引入插件

script里面引入
import uParse from '@/static/u-parse/u-parse.vue' 
注意:引入的时候是你自己之前存放的路径

export default {
 	data() {
			return {
				dataObj:null,
			}
		},
		created(){
			that = this; 
			that.dataObj ="<div>我是HTML代码</div>"
			console.log(that.dataObj)
		},
   components: {
	    uParse
	}
}

style里面引入

@import url("@/static/u-parse/u-parse.css");
注意:引入的时候是你自己之前存放的路径

view中的

<view class="content padding-lr">
	 <uParse :content="dataObj.activity_content" :imageProp="imageProp" :noData="内容为空" />
</view>
注意: :content="dataObj.activity_content"是你在js中存放的对象

重点来了(图片显示)

需要修改你下载的插件代码
找到u-parse.css这个文件,然后crtl+F搜索img,大概在143行,然后对代码进行修改
原来的代码
.wxParse .img {
display: inline-block;
width: 0;
height:0;
max-width: 100%;
overflow: hidden;
}

改成
.wxParse .img {
display: inline-block;
width: 100%;
height: 200px;
max-width: 100%;
overflow: hidden;
}
最后:就可以显示出来富文本中的图片了
注意:这个是解决了在app端显示的异常,但是这个会造成小程序端异常的问题,然后你就用uniapp端自带的分类插件,根据不同端显示不同内容的插件#if MP。。。。。。。

关注我的公众号SpaceObj 领取idea系列激活码

posted on 2023-05-11 09:57  张伯灵  阅读(454)  评论(0编辑  收藏  举报