有时候我们制作网页时或者做演示的demo或许暂时没有合适的图片，这个时候如果我们留空页面会变得空旷不足，影响整个效果，当然我们不能那样，我们可以找个提供占位符的网站，使用他们提高的占位符服务来弥补页面缺陷。以下服务都支持任意参数均为宽乘以高
浅灰色背景，显示图片尺寸文字的图片占位符
- x 前面的数值是宽，后面的数值是高，单位都是 px
- 高后面的内容是其他自定义部分，如果不需要可以删除
- 只有 placeholder 支持自定义图片文件格式
- 然后全部都支持自定义文字描述，如果要自定义可以在最后面添加
?text=文字将文字替换成你需要显示的内容
https://placeholder.com 可自定义背景色和文字颜色 可自定义图片格式（.webp, .jpg, .png）。不支持中文描述。
1 | <img src="https://via.placeholder.com/375x90.webp/aaff04/882299" /> |
https://dummyimage.com 可自定义背景色和文字颜色。支持中文描述。
1 | <img src="https://dummyimage.com/375x90/aaff04/882299" /> |
https://fakeimg.pl 可自定义背景色和文字颜色。不支持中文描述。
1 | <img src="https://fakeimg.pl/375x90/ee44cc/ffff04" /> |
特点：不同的尺寸会调出不同的图像，这样不会让你页面单调
浅灰色背景，可加文字的图片占位符
图片占位符纯色背景带文字版代码：
1 | <img src="https://fpoimg.com/640x140?text=This+is+a+very+good+the+Web+Images+placeholder+service.+by+yijile.com" alt="placekitten.com 宽640X高280"/> |
图片占位符纯色背景无文字版代码：
1 | <img src="https://fpoimg.com/375x180" /> |
特点：支持定义背景及文字色彩
具体定义方法
定义文字：text=yijile.com
不支持中文
定义背景色：bg_color=C90000
颜色为16进制数值
定义文字色彩：text_color=6E0101
颜色为16进制数值
第一个值要在前面加个“？”多个值要在前面一个值后面加“&”如下：
1 | <img src="https://fpoimg.com/375x200?bg_color=C90000&text_color=6E0101&text=yijile.com+'blog" /> |
纯文字图片占位符特别说明
为保证稳定性和可以令markdown识别，文字中的空格请用+号代替
更多提供图片占位服务的网站：
随机图片占位符占位图
https://picsum.photos 有点慢，可以自定义是否每次都换图，支持自定义格式（.jpg, .webp）
random=1 不换图（清除缓存才会换图）
random=2 换图（每次刷新换图）
1 | <img src="https://picsum.photos/400/200.webp?random=2" /> |
https://placebear.com 熊图片，长宽比例一致时显示比较好
1 | <img src="https://placebear.com/375/300" /> |
https://loremflickr.com 动物，有水印
1 | <img src="https://loremflickr.com/375/200" /> |
https://baconmockup.com 烹饪和食物
1 | <img src="https://baconmockup.com/375/200" /> |
https://placebeard.it 人物。每次都会刷新
1 | <img src="https://placebeard.it/375/200" /> |
已经无法使用的占位符图片服务
| 域名 | 类型 | 检查（显示图片表示可用） |
|---|---|---|
| https://placekitten.com/ | 图片尺寸文字占位符占位图 | |
| https://lorempixel.com/ | 猫猫占位图 | |
| - | – | – |
Relay Tips: 一极乐（ https://yijile.com/log/259/ ）