uniapp在微信小程序中圖片寬度顯示問題示例代碼
更新時間：2023年02月04日 08:54:45 作者：畫畫520
在uniapp中，如果你的富文本圖片顯示寬度不正常，你可以通過設置圖片的寬高屬性來解決這個問題，這篇文章主要介紹了uniapp在微信小程序中圖片寬度顯示問題,需要的朋友可以參考下
在uniapp中，如果你的富文本圖片顯示寬度不正常，你可以通過設置圖片的寬高屬性來解決這個問題。例如，你可以在富文本中添加以下代碼來設置圖片的寬度為100%：
<img src="your_image_url" />
另外，如果你想設置圖片的高度，你可以添加以下代碼：
<img src="your_image_url" />
當然，可以實現(xiàn)一個 filter 來自動對圖片寬度進行處理。
export default {
// ...
filters: {
formatRichHtml(html) {
if (!html) {
return html;
}
//控制小程序中圖片大小
let newContent = html.replace(/<img[^>]*>/gi, function (match, capture) {
console.log(match.search(/style=/gi));
if (match.search(/style=/gi) === -1) {
match = match.replace(/\<img/gi, '<img style=""');
}
return match;
});
newContent = newContent.replace(/style="/gi, '$& max-width:100% !important; ');
newContent = newContent.replace(/<br[^>]*\/>/gi, '');
return newContent;
}
}
// ...
}在調用時只需要如下調用
export default {
// ...
filters: {
formatRichHtml(html) {
if (!html) {
return html;
}
//控制小程序中圖片大小
let newContent = html.replace(/<img[^>]*>/gi, function (match, capture) {
console.log(match.search(/style=/gi));
if (match.search(/style=/gi) === -1) {
match = match.replace(/\<img/gi, '<img style=""');
}
return match;
});
newContent = newContent.replace(/style="/gi, '$& max-width:100% !important; ');
newContent = newContent.replace(/<br[^>]*\/>/gi, '');
return newContent;
}
}
// ...
}在調用時只需要如下調用即可
<rich-text :nodes="xxxxxContent | formatRichHtml" />
補充：uni-app rich-text圖片自適應處理
新建公用-util.js
imgDeal(str){
return str.replace(/\<img/gi, '<img style="width:100%;height:auto;display:block;"');
}index.vue
<rich-text :nodes="content"></rich-text>
index.js
this.content=this.util.imgDeal(content);
到此這篇關于uniapp在微信小程序中圖片寬度顯示問題的文章就介紹到這了,更多相關uniapp微信小程序圖片寬度顯示內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要為大家詳細介紹了JS實現(xiàn)拖動滑塊驗證，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要介紹了JavaScript作用域鏈,結合實例形式較為詳細的分析了作用域鏈的原理、功能與相關操作注意事項,需要的朋友可以參考下2019-01-01
javascript的數(shù)組排序函數(shù) sort方法，默認是按照ASCII 字符順序進行升序排列。2009-08-08
JavaScript實現(xiàn)數(shù)組去重的7種方法
去重是開發(fā)中經(jīng)常會碰到的一個熱點問題，本文詳細的介紹了JavaScript實現(xiàn)數(shù)組去重的7種方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-03-03
iOS和Android用同一個二維碼實現(xiàn)跳轉下載鏈接的方法
這篇文章給大家分享的是iOS和Android掃描同一個二維碼，分別跳到各自的下載鏈接的實現(xiàn)方法，文中給出了實例代碼，有需要的朋友們可以參考借鑒。2016-09-09
使用Javascript和DOM Interfaces來處理HTML
使用Javascript和DOM Interfaces來處理HTML...2006-10-10
小程序使用watch監(jiān)聽數(shù)據(jù)變化的方法詳解
這篇文章主要介紹了小程序使用watch監(jiān)聽數(shù)據(jù)變化的方法詳解,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-09-09
這篇文章主要介紹了js實現(xiàn)支持手機滑動切換的輪播圖片效果,實例分析了javascript實現(xiàn)圖片切換的相關技巧,非常具有實用價值,需要的朋友可以參考下2015-04-04
如果編程加入了時間的概念就一切變得非常復雜。通常我們的程序是飛快地解析執(zhí)行，一毫秒緊接著一毫秒，從上至下地執(zhí)行，這稱之為同步。但如果我們想讓后臺的程序不等前面的程序執(zhí)行，就執(zhí)行呢，于是就有了異步的概念。2010-06-06
這篇文章主要介紹了ECMAscrip新特性之函數(shù)的擴展,在ECMAScript?2015中，允許為函數(shù)的參數(shù)添加默認值，將默認值直接寫在參數(shù)的后面即可,具體情況參考下面文章的詳細內容2021-12-12