uni-app生成小程序,v-html的內容用rich-text渲染出來,控制圖片寬度


在小程序里rich-text(查看文檔)應該相當於v-html。 用uni-app做的一個頁面,頁面是后台返回的html字符串,字符串里有圖片,圖片用css設置了寬度,在h5顯示正常,但小程序里面超出頁面寬度,顯示不全。

<view class="htmlContianer" v-html="description" />

css部分
.htmlContianer img{
 max-width: 100%;
}

點開控制台才發現,在小程序里,是渲染成rich-text標簽。

 

 

 

經查閱資料,需要控制圖片的樣式,可以用以下2種方法:

1. 添加一個class ,然后在APP.vue里寫樣式(是全局樣式),在頁面寫樣式不生效。

this.description= this.description.replace(/<img/gi, '<img class="image-wrap"')

APP.vue里的樣式

.image-wrap{
  max-width: 100%;
}

2.直接添加行內樣式,相比上面更簡單

this.description = this.description.replace(/<img/gi,'<img style="max-width:100%;"')

 

PS: 從設置圖片寬度得知,應該能控制rich-text里面所有元素的樣式 

/*
 * 1.去掉標簽里的style屬性
 * 2.給標簽添加css樣式
*/
let b= "<div style='width:32px;height:33px;font-size:15px'>hello js</div>
b.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '').replace(/<div/gi, '<div class="ok"');
b =>
<div class="ok">hello js</div>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM