mip-img 图片

<mip-img> 用来支持在 MIP 中增加图片内容。

标题 内容
类型 通用
支持布局 responsive, fixed-height, fill, container, fixed
所需脚本 无

示例

[notice] <mip-img>需要对应闭合标签</mip-img>，不支持自闭合写法。自闭合规范请见w3.org。

最基本使用

  1. <mip-img
  2.     layout="responsive"
  3.     width="350"
  4.     height="263"
  5.     src="https://www.mipengine.org/static/img/sample_01.jpg">
  6. </mip-img>

加全屏查看

  1. <mip-img
  2.     layout="responsive"
  3.     width="350"
  4.     height="263"
  5.     popup
  6.     src="https://www.mipengine.org/static/img/sample_01.jpg">
  7. </mip-img>

其他布局（以 fixed 为例）

  1. <mip-img
  2.     layout="fixed-height"
  3.     height="263"
  4.     alt="baidu mip img"
  5.     src="https://www.mipengine.org/static/img/sample_01.jpg">
  6. </mip-img>

带图片标题

图片标题可添加在 <mip-img> 后用于说明，可在 <style mip-custom> 标签下自定义样式。

  1. <mip-img
  2.     layout="responsive"
  3.     width="350"
  4.     height="263"
  5.     popup
  6.     alt="baidu mip img"
  7.     src="https://www.mipengine.org/static/img/sample_01.jpg">
  8. </mip-img>
  9. <p class="mip-img-subtitle">带图片标题的类型</p>

属性

width

说明：宽度，不是实际宽度，与高度属性配合来设置图片比例，详见组件布局
必选项：否
类型：数字
单位：无
默认值：无

height

说明：高度，不是实际高度，与宽度属性配合来设置图片比例，详见组件布局
必选项：否
类型：数字
单位：无
默认值：无

src

说明：图片地址
必选项：是
格式：字符串

popup

说明：设置图片资源是否可以在被点击后弹出全屏浮层查看
必选项：否
取值：无

alt

说明：与 <img> 标签的 alt 属性相同
必选项：否

class

说明：与 <img> 标签的 class 属性相同，用于标识元素，设置元素样式
必选项：否