foreword
In daily work, we often encounter the need to render rich text content. The most common problem is that after the page style is adjusted, there will be problems with the image display when rendering the rich text content returned by the server. The reason is that the image in the rich text The information has no style processing or the added style is inconsistent with the style in the parent component. Normal display:
The exception shows:
Let's talk about the processing method of rich text image style modification.
1. Deep processing
2. Regularization + replacement
1.Deep method processing
1. There are many ways to implement deep processing. It is necessary to determine the version of vue, and determine whether the style language type is less or scss.
Check the vue version method path in uniapp:
basic configuration in manifest.json - vue version selection:
<style lang="scss">will specify to use scss or scss It is less.
This project is vue3 and the language is scss. The component style penetrating writing method:
::v-deep 组件名
The problem with the abnormal picture display in the project is that the picture display size exceeds the view area. You can modify the picture style to 100% of the parent element to keep it normal. The related styles are as follows:
.content{
padding: 40rpx 10rpx 0; // 富文本与上面标题的距离
::v-deep img{
width: 100%;
}
}
This way of writing will work in the H5 page, but it will not work in the WeChat applet. Here is a more general way of writing: regular + replacement.
2. Regularization + replacement
The implementation format is as follows:
str=str.replace(/img/gi,'<img style="width: 100%"')
Related script content:
getNewsDetail(cid,id){
uni.request({
url:"https://xxxxx?cid="+cid+"&id="+id,
success: (res) => {
if(res.statusCode==200){
// img标签添加样式
res.data.content=res.data.content.replace(/img/gi,'img style="width: 100%"'),
this.newsDetail=res.data,
console.log(this.newsDetail)
}else{
uni.showToast({
title:"资讯详情查询异常!"
})
}
}
})
}
Note:
1. gi means full-text search in regex, ignoring case; //The middle is the content of regex hit. It means starting from / and ending with /. 2. When
adding style to img, in order to ensure normal parsing, you need to use double quotation marks.
The above are two ways to modify the style of rich text content. If you see this and find it helpful, please like and collect it. If you have other processing methods, please leave a message in the comment area to communicate with each other!