百度智能小程序 圖片

image 圖片

解釋：圖片，支持 JPG、PNG、GIF、BMP、WEBP 等格式。image 組件默認(rèn)寬度 300px、高度 225px。

屬性說明

mode 有效值

有 13 種模式，其中 4 種是縮放模式，9 種是裁剪模式。

示例 

在開發(fā)者工具中打開

代碼示例 1： 自定義縮放模式

<view class="wrap">
    <view class="card-area" s-for="{{scaleArray}}">
        <image
            class="image-area {{item.hasBackgroud == 1 ? 'backGround': ''}}"
            data-name="{{item.mode}}"
            bindtap="onTap"
            mode="{{item.mode}}"
            src="{{src}}"
            binderror="imageError"
            bindload="imageLoad" />
        <view class="bottom-description">{{item.text}}</view>
    </view>
</view>

Page({
    data: {
        scaleArray: [{
            mode: 'scaleToFill',
            text: 'scaleToFill：不保持縱橫比縮放圖片，使圖片完全適應(yīng)'
        }, {
            mode: 'aspectFit',
            text: 'aspectFit：保持縱橫比縮放圖片，使圖片的長邊能完全顯示出來',
            hasBackgroud: 1
        }, {
            mode: 'aspectFill',
            text: 'aspectFill：保持縱橫比縮放圖片，只保證圖片的短邊能完全顯示出來'
        }, {
            mode: 'widthFix',
            text: 'widthFix：寬度不變，高度自動變化，保持原圖寬高比不變'
        }],
        src: 'https://b.bdstatic.com/miniapp/images/demo-dog.png'
    },
    imageError(e) {
      console.log('image 發(fā)生 error 事件，攜帶值為', e.detail.errMsg);
    },
    onTap(e) {
      console.log('image 發(fā)生 tap 事件', e);
    },
    imageLoad(e) {
        console.log('image 加載成功', e.type);
    }
});

代碼示例 2： 不縮放圖片，自定義裁切模式

<view class="wrap">
    <view class="card-area" s-for="{{cutArray}}">
        <image
            class="image-area"
            data-name="{{item.mode}}"
            bindtap="onTap"
            lazy-load="true"
            image-menu-prevent="true"
            mode="{{item.mode}}"
            src="{{src}}"
            binderror="imageError"
            bindload="imageLoad" />
        <view class="bottom-description">{{item.text}}</view>
    </view>
</view>

Page({
    data: {
        cutArray: [{
            mode: 'top',
            text: 'top：不縮放圖片，只顯示圖片的頂部區(qū)域'
        }, {
            mode: 'bottom',
            text: 'bottom：不縮放圖片，只顯示圖片的底部區(qū)域'
        }, {
            mode: 'center',
            text: 'center：不縮放圖片，只顯示圖片的中間區(qū)域'
        }, {
            mode: 'left',
            text: 'left：不縮放圖片，只顯示圖片的左邊區(qū)域'
        }, {
            mode: 'right',
            text: 'right：不縮放圖片，只顯示圖片的右邊邊區(qū)域'
        }, {
            mode: 'top left',
            text: 'top left：不縮放圖片，只顯示圖片的左上邊區(qū)域'
        }, {
            mode: 'top right',
            text: 'top right：不縮放圖片，只顯示圖片的右上邊區(qū)域'
        }, {
            mode: 'bottom left',
            text: 'bottom left：不縮放圖片，只顯示圖片的左下邊區(qū)域'
        }, {
            mode: 'bottom right',
            text: 'bottom right：不縮放圖片，只顯示圖片的右下邊區(qū)域'
        }],
        src: 'https://b.bdstatic.com/miniapp/images/demo-dog.png'
    },
    imageError(e) {
        console.log('image 發(fā)生 error 事件，攜帶值為', e.detail.errMsg);
    },
    onTap(e) {
        console.log('image 發(fā)生 tap 事件', e);
    },
    imageLoad(e) {
        console.log('image 加載成功', e.type);
    }
});

代碼示例 3 - iOS 可支持 webp

<image src='https://b.bdstatic.com/searchbox/icms/searchbox/images/demo.webp' webp/>

Bug & Tip

• Tip：支持設(shè)置 CSS background-position 屬性，但是不推薦使用，會影響對應(yīng) mode 類型的展示。
• Tip：image 組件默認(rèn)寬度 300px、高度 225px。
• Tip：未顯示設(shè)置 preview 的圖片會進行點擊默認(rèn)預(yù)覽判斷，建議顯示設(shè)置 preview。
• Tip：點擊預(yù)覽功能 IOS 端目前不支持本地圖片預(yù)覽，可以設(shè)置 original-src 為遠(yuǎn)程圖片地
• Tip：webp 屬性只針對 iOS 端，支持網(wǎng)絡(luò)資源的 WEBP 格式的圖片。

參考示例

參考示例 1: 可放動圖 

在開發(fā)者工具中打開

<image src="https://b.bdstatic.com/miniapp/images/radio.gif" rel="external nofollow"  />

錯誤碼

代碼示例 3 - iOS 可支持 webp