Skip to content
My Docs

Image 图像

基本用法

可以通过 src 属性设置图像地址, 图像宽度默认为父容器宽度，图像高度等比例缩放



<div style="width:400px;height:200px;background-color: #ccc;">
  <Image
    src="https://daisyui.com/images/stock/photo-1625726411847-8cbb60cc71e6.jpg"
  />
</div>
<div>
  <Image
    src="https://daisyui.com/images/stock/photo-1625726411847-8cbb60cc71e6.jpg"
  />
</div>

设置图像的宽高以及宽高比

可以通过 width 属性设置图像的宽度(只有当 layout属性为 fixed、contained、cover 时自定义 width 生效，其他值 width 为 100%), height 属性设置图像的高度，或者 aspectRatio 设置宽高比。



<div style="background-color: #ccc;">
  <Image
    width="200px"
    height="300px"
    layout="fixed"
    src="https://img.alicdn.com/imgextra/i1/O1CN01ifXUQI1u8qXD1Mkug_!!6000000005993-0-tps-460-460.jpg"
  />
</div>

<div style="background-color: #ccc;">
  <Image
    width="200px"
    aspectRatio="2:1"
    layout="fixed"
    src="https://img.alicdn.com/imgextra/i1/O1CN01ifXUQI1u8qXD1Mkug_!!6000000005993-0-tps-460-460.jpg"
  />
</div>

图像适应父容器的方式

可以通过 layout 属性设置图像适应父容器的方式，可选项为 ‘fixed’、 ‘constrained’、 ‘fullWidth’、 ‘cover’、 ‘responsive’、 ‘contained’。


fixed
<div style="width:100%; height: 202px; background-color: #ccc; border: 1px solid #000; overflow: hidden;">
  <Image
    src="https://img.alicdn.com/imgextra/i1/O1CN01ifXUQI1u8qXD1Mkug_!!6000000005993-0-tps-460-460.jpg"
    layout="fixed"
  />
</div>
<div style="width:100%; height: 500px; background-color: #ccc; border: 1px solid #000; overflow: hidden;">
  <Image
    src="https://img.alicdn.com/imgextra/i1/O1CN01ifXUQI1u8qXD1Mkug_!!6000000005993-0-tps-460-460.jpg"
    layout="fixed"
  />
</div>

constrained
<div style="width:100%; height: 202px; background-color: #ccc; border: 1px solid #000; overflow: hidden;">
  <Image
    src="https://img.alicdn.com/imgextra/i1/O1CN01ifXUQI1u8qXD1Mkug_!!6000000005993-0-tps-460-460.jpg"
    layout="constrained"
  />
</div>
<div style="width:100%; background-color: #ccc; border: 1px solid #000; overflow: hidden;">
  <Image
    src="https://img.alicdn.com/imgextra/i1/O1CN01ifXUQI1u8qXD1Mkug_!!6000000005993-0-tps-460-460.jpg"
    layout="constrained"
  />
</div>

fullWidth
<div style="width:100%; height: 202px; background-color: #ccc; border: 1px solid #000; overflow: hidden;">
  <Image
    src="https://img.alicdn.com/imgextra/i1/O1CN01ifXUQI1u8qXD1Mkug_!!6000000005993-0-tps-460-460.jpg"
    layout="fullWidth"
  />
</div>
<div style="width:100%; height: auto; background-color: #ccc; border: 1px solid #000; overflow: hidden;">
  <Image
    src="https://img.alicdn.com/imgextra/i1/O1CN01ifXUQI1u8qXD1Mkug_!!6000000005993-0-tps-460-460.jpg"
    layout="fullWidth"
  />
</div>

cover
<div style="width:100%; height: auto; background-color: #ccc; border: 1px solid #000; overflow: hidden;">
  <Image
    src="https://img.alicdn.com/imgextra/i1/O1CN01ifXUQI1u8qXD1Mkug_!!6000000005993-0-tps-460-460.jpg"
    layout="cover"
  />
</div>

responsive
<div style="width:100%; height: auto; background-color: #ccc; border: 1px solid #000; overflow: hidden;">
  <Image
    src="https://img.alicdn.com/imgextra/i1/O1CN01ifXUQI1u8qXD1Mkug_!!6000000005993-0-tps-460-460.jpg"
    layout="responsive"
  />
</div>

contained
<div style="width:100%; height: 202px; background-color: #ccc; border: 1px solid #000; overflow: hidden;">
  <Image
    src="https://img.alicdn.com/imgextra/i1/O1CN01ifXUQI1u8qXD1Mkug_!!6000000005993-0-tps-460-460.jpg"
    layout="contained"
  />
</div>
<div style="width:100%; height: 500px; background-color: #ccc; border: 1px solid #000; overflow: hidden;">
  <Image
    src="https://img.alicdn.com/imgextra/i1/O1CN01ifXUQI1u8qXD1Mkug_!!6000000005993-0-tps-460-460.jpg"
    layout="contained"
  />
</div>

API

属性说明类型默认值
src图像资源string | ImageMetadata-
width图像宽度（只有当 layout属性为 fixed、contained、cover 时自定义 width 生效，其他值 width 为 100%）string | number-
height图像高度string | number-
aspectRatio图像宽高比（设置 width 或者 height 时生效）string | number-
style图像自定义样式string-
alt图像加载错误时的文本string”
layout图像适应父容器的方式
可选值:
‘fixed’、 ‘constrained’、 ‘fullWidth’、 ‘cover’、 ‘responsive’、 ‘contained’		Enum-
fetchpriority获取图像时的相对的优先级
可选值:
‘high’、 ‘low’、 ‘auto’		Enumauto
loading指示浏览器应当如何加载该图像
可选值:
‘eager’、 ‘lazy’		Enumeager
decoding设置当前图像解码方式
可选值:
‘sync’、 ‘async’、 ‘auto’		Enumauto