Vue中v-html圖片過大導(dǎo)致溢出的問題及解決
vue v-html圖片過大導(dǎo)致溢出
問題描述
移動(dòng)端開發(fā)中，經(jīng)常遇到渲染富文本的需求！但是也會(huì)有很多問題，比如遇到 v-html 渲染富文本時(shí)圖片會(huì)溢出，內(nèi)容里邊的圖片太大，導(dǎo)致圖片把頁面撐的比較寬。
找了很多方法沒有用！然后自己試了好幾種方法！最后通過簡單的 一行 css 代碼讓圖片正常顯示了
圖片太大，把頁面變成可以左右滑動(dòng)，讓之前一些樣式失效，比如下面的 標(biāo)頭（商品詳情） 原來是居中的位置
CSS
<style scoped lang="scss">
::v-deep img{
max-width:100%;
}
</style>通過加上上面的代碼，頁面的圖片就可以正常顯示了
可以看到圖片 的寬度和高度 進(jìn)行了等比例的縮小
關(guān)于富文本渲染內(nèi)容圖片溢出問題
描述問題場景
前提：最近做的一個(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)文章
vue-infinite-loading2.0 中文文檔詳解
本篇文章主要介紹了vue-infinite-loading2.0 中文文檔詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-04-04
Vue中watch與watchEffect的區(qū)別詳細(xì)解讀
這篇文章主要介紹了Vue中watch與watchEffect的區(qū)別詳細(xì)解讀,watch函數(shù)與watchEffect函數(shù)都是監(jiān)聽器，在寫法和用法上有一定區(qū)別，是同一功能的兩種不同形態(tài)，底層都是一樣的,需要的朋友可以參考下2023-11-11
vue+springboot用戶注銷功能實(shí)現(xiàn)代碼
這篇文章主要介紹了vue+springboot用戶注銷功能,本文通過示例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-05-05
vue調(diào)用swiper插件步驟教程(最易理解且詳細(xì))
有時(shí)候我們需要在vue中使用輪播組件,如果是在vue組件中引入第三方組件的話,最好通過npm安裝,從而進(jìn)行統(tǒng)一安裝包管理,下面這篇文章主要給大家介紹了關(guān)于vue調(diào)用swiper插件的相關(guān)資料,需要的朋友可以參考下2023-04-04
vue.js 使用axios實(shí)現(xiàn)下載功能的示例
下面小編就為大家分享一篇vue.js 使用axios實(shí)現(xiàn)下載功能的示例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看2018-03-03
這篇文章主要介紹了vue如何解決echarts5.0以上版本插入地圖的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06
vue3+ts中ref與reactive指定類型實(shí)現(xiàn)示例
這篇文章主要為大家介紹了vue3+ts中ref及reactive如何指定類型的實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-06-06
Arco Design 作為一款專為 Vue3 打造的企業(yè)級(jí) UI 組件庫,以其豐富的特性和卓越的性能,成為現(xiàn)代 Web 應(yīng)用開發(fā)者值得關(guān)注的選擇,這篇文章主要介紹了Vue3 框架Arco Design詳解,需要的朋友可以參考下2024-08-08
這篇文章主要介紹了關(guān)于Vue 3.0引入百度地圖不兼容的解決辦法,本文通過實(shí)例代碼給大家分享解決方法，需要的朋友可以參考下2022-08-08
使用Vue與WebSocket創(chuàng)建實(shí)時(shí)通知系統(tǒng)
在現(xiàn)代應(yīng)用開發(fā)中,實(shí)時(shí)性已成為用戶體驗(yàn)的一個(gè)重要組成部分,ue 作為一款流行的前端框架,配合 WebSocket,可以輕松構(gòu)建實(shí)時(shí)通知系統(tǒng),在本文中,我們將通過一個(gè)簡單的示例,使用 Vue 3 的 Composition API（setup 語法糖）來創(chuàng)建一個(gè)實(shí)時(shí)通知系統(tǒng)2024-11-11