Image 图片

图片组件，用于图片展示和预览。

基础用法

<div id="demo-image"></div>

<script>
  const image = new SaImage('#demo-image', {
    src: '../../sanoui-portal/images/placeholder-200.svg',
    alt: '示例图片',
    fit: 'cover'
  });
</script>

加载 SanoUI 组件中...

不同适应方式

通过 fit 配置图片的适应方式。

<div id="demo-image-fit"></div>

<script>
  // fill - 填充
  new SaImage('#demo-image-fit', {
    src: '../../sanoui-portal/images/placeholder-150.svg',
    fit: 'fill'
  });
  
  // contain - 包含
  new SaImage('#demo-image-fit', {
    src: '../../sanoui-portal/images/placeholder-150.svg',
    fit: 'contain'
  });
  
  // cover - 覆盖
  new SaImage('#demo-image-fit', {
    src: '../../sanoui-portal/images/placeholder-150.svg',
    fit: 'cover'
  });
  
  // none - 不缩放
  new SaImage('#demo-image-fit', {
    src: '../../sanoui-portal/images/placeholder-150.svg',
    fit: 'none'
  });
  
  // scale-down - 缩小适应
  new SaImage('#demo-image-fit', {
    src: '../../sanoui-portal/images/placeholder-150.svg',
    fit: 'scale-down'
  });
</script>

加载 SanoUI 组件中...

图片预览

通过 preview: true 启用图片预览功能。

<div id="demo-image-preview"></div>

<script>
  const image = new SaImage('#demo-image-preview', {
    src: '../../sanoui-portal/images/placeholder-200.svg',
    alt: '可预览图片',
    fit: 'cover',
    preview: true
  });
</script>

加载 SanoUI 组件中...

API

构造函数参数

参数	说明	类型	默认值
container	容器选择器或元素	string | HTMLElement	-
options	配置选项	SaImageOptions	{}

配置选项

参数	说明	类型	可选值	默认值
src	图片地址	string	-	-
alt	图片描述	string	-	''
fit	适应方式	string	fill / contain / cover / none / scale-down	fill
preview	是否可预览	boolean	-	false
lazy	是否懒加载	boolean	-	false

方法

方法名	说明	参数	返回值
setSrc	设置图片地址	src: string	void
preview	预览图片	-	void
destroy	销毁实例	-	void

示例代码

手动创建实例

const image = new SaImage('#my-image', {
  src: 'https://example.com/image.jpg',
  alt: '示例图片',
  fit: 'cover',
  preview: true,
  lazy: true
});

// 更新图片
image.setSrc('https://example.com/new-image.jpg');

// 预览图片
image.preview();

懒加载

const image = new SaImage('#my-image', {
  src: 'https://example.com/image.jpg',
  lazy: true // 启用懒加载
});

实际使用场景

场景 1：图片列表展示

在列表中展示多张图片，支持预览。

<div id="image-list" style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;"></div>

<script>
  const images = [
    '../../sanoui-portal/images/placeholder-200.svg',
    '../../sanoui-portal/images/placeholder-200.svg',
    '../../sanoui-portal/images/placeholder-200.svg'
  ];
  
  images.forEach((src, index) => {
    const container = document.createElement('div');
    container.style.width = '100%';
    container.style.aspectRatio = '1';
    container.style.overflow = 'hidden';
    container.style.borderRadius = '4px';
    document.getElementById('image-list').appendChild(container);
    
    new SaImage(container, {
      src: src,
      alt: `图片 ${index + 1}`,
      fit: 'cover',
      preview: true
    });
  });
</script>

加载 SanoUI 组件中...

场景 2：头像展示

使用 Image 组件展示用户头像。

<div id="avatar-container" style="display: flex; gap: 1rem; align-items: center;"></div>

<script>
  const users = [
    { name: '用户一', avatar: '../../sanoui-portal/images/placeholder-60.svg' },
    { name: '用户二', avatar: '../../sanoui-portal/images/placeholder-60.svg' },
    { name: '用户三', avatar: '../../sanoui-portal/images/placeholder-60.svg' }
  ];
  
  users.forEach(user => {
    const userContainer = document.createElement('div');
    userContainer.style.display = 'flex';
    userContainer.style.alignItems = 'center';
    userContainer.style.gap = '0.5rem';
    document.getElementById('avatar-container').appendChild(userContainer);
    
    const avatarContainer = document.createElement('div');
    avatarContainer.style.width = '60px';
    avatarContainer.style.height = '60px';
    avatarContainer.style.borderRadius = '50%';
    avatarContainer.style.overflow = 'hidden';
    userContainer.appendChild(avatarContainer);
    
    new SaImage(avatarContainer, {
      src: user.avatar,
      alt: user.name,
      fit: 'cover'
    });
    
    const nameDiv = document.createElement('div');
    nameDiv.textContent = user.name;
    userContainer.appendChild(nameDiv);
  });
</script>

加载 SanoUI 组件中...