Vue中v-html圖片過大導(dǎo)致溢出的問題及解決
vue v-html圖片過大導(dǎo)致溢出
問題描述
移動(dòng)端開發(fā)中，經(jīng)常遇到渲染富文本的需求！但是也會(huì)有很多問題，比如遇到 v-html 渲染富文本時(shí)圖片會(huì)溢出，內(nèi)容里邊的圖片太大，導(dǎo)致圖片把頁面撐的比較寬。
找了很多方法沒有用！然后自己試了好幾種方法！最后通過簡(jiǎn)單的 一行 css 代碼讓圖片正常顯示了
圖片太大，把頁面變成可以左右滑動(dòng)，讓之前一些樣式失效，比如下面的 標(biāo)頭（商品詳情） 原來是居中的位置
CSS
<style scoped lang="scss">
::v-deep img{
max-width:100%;
}
</style>通過加上上面的代碼，頁面的圖片就可以正常顯示了
可以看到圖片 的寬度和高度 進(jìn)行了等比例的縮小
關(guān)于富文本渲染內(nèi)容圖片溢出問題
描述問題場(chǎng)景
前提：最近做的一個(gè)項(xiàng)目，包含了PC端和手機(jī)端，共用同一組數(shù)據(jù)庫的數(shù)據(jù)。
導(dǎo)致了，有些富文本內(nèi)容在PC端錄入的圖片，在PC端顯示正常，而在移動(dòng)端的顯示的圖片則會(huì)溢出屏幕。
- PC端：
- 移動(dòng)端：
解決方法
使用深度選擇器
/deep/ .content img {
width: 100% !important;
}
/* 或者 */
.content >>> img {
width: 100% !important;
}
使用正則匹配
// 將你要渲染的數(shù)據(jù)進(jìn)行字符串正則匹配 this.goods_info.content = res.data.data.goods_info.content.replace(/<img/g,"<img style='max-width:100%;height:auto;'");
然后再渲染出來，就可以正常了：
<div v-html="goods_info.content"></div>
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了使用vue2實(shí)現(xiàn)購物車和地址選配功能,本文通過實(shí)例代碼相結(jié)合的形式給大家介紹的非常詳細(xì)，需要的朋友可以參考下2018-03-03
vue配置生產(chǎn)環(huán)境.env.production與測(cè)試環(huán)境.env.development
這篇文章主要介紹了vue配置生產(chǎn)環(huán)境.env.production與測(cè)試環(huán)境.env.development方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了Vue首屏白屏問題的原因和解決方法講解，Vue首屏白屏問題是指在頁面初次加載時(shí)，部分或全部?jī)?nèi)容無法正常顯示，出現(xiàn)空白的情況。其原因可能是因?yàn)轫撁驿秩舅俣冗^慢，或者是因?yàn)榫W(wǎng)絡(luò)請(qǐng)求等問題導(dǎo)致數(shù)據(jù)無法及時(shí)加載2023-05-05
這篇文章主要給大家介紹了關(guān)于Vue3中watch用法與最佳實(shí)踐的相關(guān)資料,watch的作用可以監(jiān)控一個(gè)值的變換,并調(diào)用因?yàn)樽兓枰獔?zhí)行的方法,可以通過watch動(dòng)態(tài)改變關(guān)聯(lián)的狀態(tài),需要的朋友可以參考下2021-07-07
vue中使用el-table組件checkbox進(jìn)行分頁多選，回顯、切換分頁記住上一頁所勾選和取消的選項(xiàng)(示例代碼)
這篇文章主要介紹了vue中使用el-table組件checkbox進(jìn)行分頁多選，回顯、切換分頁記住上一頁所勾選和取消的選項(xiàng)本文通過示例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12
vue在使用element組件出現(xiàn)<el-input>標(biāo)簽無法輸入的問題
這篇文章主要介紹了vue在使用element組件出現(xiàn)<el-input>標(biāo)簽無法輸入的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
echarts實(shí)現(xiàn)獲取datazoom的起始值(包括x軸和y軸)
這篇文章主要介紹了echarts實(shí)現(xiàn)獲取datazoom的起始值(包括x軸和y軸)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07
Vue路由守衛(wèi)及頁面登錄權(quán)限控制的設(shè)置方法(兩種)
這篇文章主要介紹了Vue路由守衛(wèi)及頁面登錄權(quán)限控制的設(shè)置方法,本文通過實(shí)例代碼通過兩種方法給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-03-03
Vue中v-if、v-if-else、v-else-if與v-show的基本使用
v-if,v-else,v-else-if,v-if指令用于條件性地渲染一塊內(nèi)容,這塊內(nèi)容只會(huì)在指令的表達(dá)式返回truth值的時(shí)候被渲染,這篇文章主要給大家介紹了關(guān)于Vue中v-if、v-if-else、v-else-if與v-show的基本使用,需要的朋友可以參考下2022-10-10
今天小編就為大家分享一篇Vue最新防抖方案(必看篇)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-10-10