mip-img 圖片

mip-img 用來支援在 mip 中增加圖片內容。

範例

最基本使用

<mip-img
    layout="responsive" 
    width="350" 
    height="263"
    src="http://ztd00.photos.bdimg.com/ztd/w%3D350%3Bq%3D70/sign=e3bb1c4b97ef76c6d0d2fd2ead2d8cc7/f703738da9773912b57d4b0bff198618367ae205.jpg">
</mip-img>

加上全螢幕檢視

<mip-img
    layout="responsive" 
    width="350" 
    height="263" 
    popup
    src="http://ztd00.photos.bdimg.com/ztd/w%3D350%3Bq%3D70/sign=e3bb1c4b97ef76c6d0d2fd2ead2d8cc7/f703738da9773912b57d4b0bff198618367ae205.jpg">
</mip-img>

其他佈局（以fixed為例）

<mip-img 
    layout="fixed-height" 
    height="263"
    alt="baidu mip img" 
    src="http://ztd00.photos.bdimg.com/ztd/w%3D350%3Bq%3D70/sign=e3bb1c4b97ef76c6d0d2fd2ead2d8cc7/f703738da9773912b57d4b0bff198618367ae205.jpg">
</mip-img>

搭配圖片標題

圖片標題可新增在<mip-img>後用於說明，可在<style mip-custom> 標籤下自訂樣式

<mip-img 
    layout="responsive" 
    width="350" 
    height="263"
    popup 
    alt="baidu mip img" 
    src="http://ztd00.photos.bdimg.com/ztd/w%3D350%3Bq%3D70/sign=e3bb1c4b97ef76c6d0d2fd2ead2d8cc7/f703738da9773912b57d4b0bff198618367ae205.jpg">
</mip-img>
<p class="mip-img-subtitle">带图片标题的类型</p>

屬性

src

#說明：圖片位址
必選項：是
格式：字串

popup

說明：設定圖片資源是否可以在被點擊後彈出全螢幕浮層查看
必選項：否
取值：無

alt

說明：與img標籤的alt屬性相同
必選項：否

class

#說明：與img標籤的class屬性相同，用於識別元素，設定元素樣式
必選項：否