图片工具函数

在开发过程中，我们常常需要使用占位图片来展示设计和布局。Cosy UI 提供了一系列图片工具函数，让你可以轻松生成各种类型的示例图片，并且支持多个图片服务提供商。

导入工具函数

import {
  getExampleImage,
  getProductImage,
  getAvatarImage,
  getLandscapeImage,
} from '@coffic/cosy-ui';

基础用法

最简单的图片生成：

预览 代码

复制代码

// 生成 400x300 的随机图片 URL
const imageUrl = getExampleImage({ width: 400, height: 300 });

// 在组件中使用

<Image src={getExampleImage({ width: 400, height: 300 })} alt="示例图片" />

支持的图片服务

Cosy UI 的图片工具函数支持多种图片服务提供商，可以通过 provider 参数进行设置：

// Picsum Photos (默认)
getExampleImage({ width: 300, height: 200, provider: 'picsum' });

// Unsplash 随机图片
getExampleImage({ width: 300, height: 200, provider: 'unsplash', tag: 'nature' });

// Placeholder.com 占位图
getExampleImage({ width: 300, height: 200, provider: 'placeholder', tag: '示例文本' });

// RoboHash 机器人头像
getExampleImage({ width: 200, height: 200, provider: 'robohash', randomSeed: 'user123' });`}

特殊效果

对于 Picsum Photos，还支持灰度和模糊效果：

// 灰度效果
getExampleImage({ width: 300, height: 200, grayscale: true });

// 模糊效果 (值范围 1-10)
getExampleImage({ width: 300, height: 200, blur: 5 });

// 灰度 + 模糊组合
getExampleImage({ width: 300, height: 200, grayscale: true, blur: 5 });`}

固定随机图片

使用 randomSeed 参数可以确保每次获取到相同的图片：

预览 代码

复制代码

// 使用相同的随机种子
getExampleImage({ width: 300, height: 200, randomSeed: 'abc123' });
getExampleImage({ width: 300, height: 200, randomSeed: 'abc123' }); // 返回相同的图片

专用图片函数

除了通用的 getExampleImage 函数外，Cosy UI 还提供了几个专用的图片生成函数，它们使用预设的参数：

// 产品图片 (默认 400x300)
getProductImage();
getProductImage({ randomSeed: 'product1' });

// 头像图片 (默认 200x200，使用 RoboHash)
getAvatarImage();
getAvatarImage({ randomSeed: 'user1' });

// 景观图片 (默认 800x400，使用 Unsplash)
getLandscapeImage();
getLandscapeImage({ tag: 'mountain' });`}

API 参考

ImageOptions 接口

所有图片工具函数都接受 ImageOptions 类型的参数：

interface ImageOptions {
  width: number; // 图片宽度
  height: number; // 图片高度
  tag?: string; // 可选标签，不同服务商用途不同
  randomSeed?: number | string; // 随机种子，确保图片一致性
  provider?: ImageProvider; // 图片服务提供商
  grayscale?: boolean; // 是否使用灰度效果 (仅 Picsum)
  blur?: number; // 模糊效果级别 (仅 Picsum，范围 1-10)
}

// 支持的图片服务提供商
type ImageProvider = 'picsum' | 'unsplash' | 'placeholder' | 'robohash';

函数参考

// 通用图片生成函数
function getExampleImage(options: ImageOptions): string;

// 产品图片生成函数
function getProductImage(options?: Partial<ImageOptions>): string;

// 头像图片生成函数
function getAvatarImage(options?: Partial<ImageOptions>): string;

// 景观图片生成函数
function getLandscapeImage(options?: Partial<ImageOptions>): string;