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