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

更新時間：2023年04月20日 16:09:26 作者：潮汐未見潮落

這篇文章主要介紹了Vue中v-html圖片過大導致溢出的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

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

問題描述

移動端開發(fā)中，經常遇到渲染富文本的需求！但是也會有很多問題，比如遇到 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>

正則之后的數據

總結

以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

vue-infinite-loading2.0 中文文檔詳解
本篇文章主要介紹了vue-infinite-loading2.0 中文文檔詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-04-04
Vue中watch與watchEffect的區(qū)別詳細解讀
這篇文章主要介紹了Vue中watch與watchEffect的區(qū)別詳細解讀,watch函數與watchEffect函數都是監(jiān)聽器，在寫法和用法上有一定區(qū)別，是同一功能的兩種不同形態(tài)，底層都是一樣的,需要的朋友可以參考下
2023-11-11
vue+springboot用戶注銷功能實現(xiàn)代碼
這篇文章主要介紹了vue+springboot用戶注銷功能,本文通過示例代碼給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧
2024-05-05
vue調用swiper插件步驟教程(最易理解且詳細)
有時候我們需要在vue中使用輪播組件,如果是在vue組件中引入第三方組件的話,最好通過npm安裝,從而進行統(tǒng)一安裝包管理,下面這篇文章主要給大家介紹了關于vue調用swiper插件的相關資料,需要的朋友可以參考下
2023-04-04
vue.js 使用axios實現(xiàn)下載功能的示例
下面小編就為大家分享一篇vue.js 使用axios實現(xiàn)下載功能的示例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看
2018-03-03
vue如何解決echarts5.0以上版本插入地圖的問題
這篇文章主要介紹了vue如何解決echarts5.0以上版本插入地圖的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-06-06
vue3+ts中ref與reactive指定類型實現(xiàn)示例
這篇文章主要為大家介紹了vue3+ts中ref及reactive如何指定類型的實現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-06-06
Vue3 框架Arco Design詳解
Arco Design 作為一款專為 Vue3 打造的企業(yè)級 UI 組件庫,以其豐富的特性和卓越的性能,成為現(xiàn)代 Web 應用開發(fā)者值得關注的選擇,這篇文章主要介紹了Vue3 框架Arco Design詳解,需要的朋友可以參考下
2024-08-08
關于Vue 3.0引入百度地圖不兼容的解決辦法
這篇文章主要介紹了關于Vue 3.0引入百度地圖不兼容的解決辦法,本文通過實例代碼給大家分享解決方法，需要的朋友可以參考下
2022-08-08
使用Vue與WebSocket創(chuàng)建實時通知系統(tǒng)
在現(xiàn)代應用開發(fā)中,實時性已成為用戶體驗的一個重要組成部分,ue 作為一款流行的前端框架,配合 WebSocket,可以輕松構建實時通知系統(tǒng),在本文中,我們將通過一個簡單的示例,使用 Vue 3 的 Composition API（setup 語法糖）來創(chuàng)建一個實時通知系統(tǒng)
2024-11-11