【REACT19】开发中经常会用到的默认占位图片工具

开发中会用到的图片占位工具网站

类别	名称	链接	特点	示例
占位图片资源	Picsum	https://picsum.photos/	提供随机图片，支持自定义尺寸	https://picsum.photos/800/400 生成 800x400 随机图片
	Dummy Image	https://dummyimage.com/	自定义尺寸、背景颜色和文字	https://dummyimage.com/600x400/4CAF50/fff&text=测试图片 生成绿色背景、白色文字的测试图片
高质量测试图片	Unsplash	https://unsplash.com/	高质量免费图片，适合背景或内容	搜索关键词，选择图片下载
	Pexels	https://www.pexels.com/	所有图片免费使用，适合测试视觉效果	-
	Pixabay	https://pixabay.com/	免费高质量图片、插图和视频	-
随机图片资源	Random User	https://randomuser.me/	提供随机用户头像，适合测试用户布局	-
	Lorempixel	http://lorempixel.com/	不同类别的随机图片，支持自定义尺寸	-

以下是根据您提供的 Picsum 详细使用文档整理的 Markdown 表格，便于快速查阅各项功能：

功能类别	说明	URL 示例
基础用法	指定宽度和高度获取随机图片	https://picsum.photos/200/300
	仅指定尺寸获取正方形图片	https://picsum.photos/200
特定图片	通过图片 ID 获取特定图片	https://picsum.photos/id/237/200/300
	所有可用图片 ID 列表	https://picsum.photos/images
静态随机图片	基于种子值获取相同的随机图片	https://picsum.photos/seed/picsum/200/300
灰度效果	添加参数获取灰度图片	https://picsum.photos/200/300?grayscale
模糊效果	添加参数获取模糊图片	https://picsum.photos/200/300/?blur
	调整模糊程度（1-10）	https://picsum.photos/200/300/?blur=2
高级组合	组合多个效果（特定图片 + 灰度 + 模糊）	https://picsum.photos/id/870/200/300?grayscale&blur=2
	防止缓存（添加随机参数）	<img src="https://picsum.photos/200/300?random=1">
文件格式	添加 .jpg 后缀	https://picsum.photos/200/300.jpg
	添加 .webp 后缀	https://picsum.photos/200/300.webp
图片列表 API	获取图片列表（默认30条/页）	https://picsum.photos/v2/list
	分页参数（页码 + 每页数量）	https://picsum.photos/v2/list?page=2&limit=100
图片详情 API	通过 ID 获取图片详细信息	https://picsum.photos/id/0/info
	通过种子获取图片详细信息	https://picsum.photos/seed/picsum/info
返回数据格式	图片信息 JSON 示例

{
	"id": "0",
 	"author": "Alejandro Escamilla",
 	"width": 5616,
 	"height": 3744,
 	"url": "https://unsplash.com/...",
 	"download_url": "https://picsum.photos/..."
 }

测试数据接口

名称	描述	主要功能	使用示例
JSONPlaceholder	提供免费在线REST API，适合开发过程中进行网络请求和请求参数的测试。	支持GET、POST、PUT、PATCH、DELETE等多种请求方法，返回JSON格式数据。	访问 http://jsonplaceholder.typicode.com/ 获取帖子、评论、用户等测试数据。
Lorem Picsum	一个可以随机返回照片资源的在线接口，支持指定照片尺寸。	直接返回照片资源链接，可用于HTML的<img>标签的src属性。	访问 https://picsum.photos/ 获取所需尺寸的图片资源。