mip-img 이미지


mip-img는 mip에 이미지 콘텐츠 추가를 지원하는 데 사용됩니다.

QQ截图20170204112526.png

가장 기본적인 사용법

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

기타 레이아웃(예시로 고정)

<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

설명: 이미지 리소스가 생성된 후 보기 위해 전체 화면 부동 레이어를 팝업할 수 있는지 여부를 설정합니다. clicked
필수 옵션: No
값: 없음

alt

설명: img 태그의 alt 속성과 동일
필수 옵션: No

class

설명: img 태그의 class 속성과 동일, 요소 식별 및 요소 스타일 설정
필수 옵션: 아니요