首先需要下载插件
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。。。。。。。