腳本之家服務器常用軟件

快捷導航

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ù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

uniapp在微信小程序中圖片寬度顯示問題示例代碼

補充：uni-app rich-text圖片自適應處理

相關文章

最新評論

大家感興趣的內容

最近更新的內容

常用在線小工具