Vue中v-html圖片過大導致溢出的問題及解決

Posted on by

vue v-html圖片過大導致溢出

問題描述

移動端開發中，經常遇到渲染富文本的需求！但是也會有很多問題，比如遇到 v-html 渲染富文本時圖片會溢出，內容裡邊的圖片太大，導致圖片把頁面撐的比較寬。

找瞭很多方法沒有用！然後自己試瞭好幾種方法！最後通過簡單的 一行 css 代碼讓圖片正常顯示瞭

圖片太大，把頁面變成可以左右滑動，讓之前一些樣式失效，比如下面的 標頭（商品詳情） 原來是居中的位置

CSS

<style scoped lang="scss">
 ::v-deep img{
     max-width:100%;
 }
</style>

通過加上上面的代碼，頁面的圖片就可以正常顯示瞭

可以看到圖片 的寬度和高度 進行瞭等比例的縮小

關於富文本渲染內容圖片溢出問題

描述問題場景

前提：最近做的一個項目，包含瞭PC端和手機端，共用同一組數據庫的數據。

導致瞭，有些富文本內容在PC端錄入的圖片，在PC端顯示正常，而在移動端的顯示的圖片則會溢出屏幕。

  • PC端：

圖片不溢出

  • 移動端：

圖片溢出

解決方法

使用深度選擇器

/deep/ .content img {
	width: 100% !important;
}

/* 或者 */

.content >>> img {
	width: 100% !important;
}

使用正則匹配

// 將你要渲染的數據進行字符串正則匹配
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>

正則之後的數據

總結

以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。

推薦閱讀：