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