mip-img images

mip-img is used to support adding image content to mip.

Example

The most basic use

<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>

Add full screen view

<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>

Other layouts (take fixed as an example)

<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>

With picture title

The picture title can be added after <mip-img> for explanation, and can be added after <style mip-custom> Custom style under tag

<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>

Attribute

src

Description: Image address
Required option: Yes
Format: String

popup

Description: Set whether the image resource can pop up a full-screen floating layer for viewing after being clicked
Required option: No
Value: None

alt

Description: Same as the alt attribute of the img tag
Required option: No

class

Description: Same as the class attribute of the img tag, used to identify elements and set element styles
Required option: No