测试用占位图像的生成工具 (Placeholder Image / Image Mocking)

（1）http://dummyimage.com/
用PHP写的，基于MIT License代码开源。可以设置图像的宽度、高度、背景色、前景色、图像格式、文本。

URI格式：
http://dummyimage.com/宽度x高度/背景色/前景色.图像格式&文本

例如：
http://dummyimage.com/320x240/333333/00a2ff.png&text=RENSANNING


（2）http://placehold.it/
功能基本等同于dummyimage.com

例如：
http://placehold.it/320x240/333333/00a2ff.png&text=RENSANNING


（3）http://fpoimg.com/
除了不能设置图像格式，只能输出PNG外其他功能基本等同于dummyimage.com，就是URI的格式稍有不同。

例如：
http://fpoimg.com/320x240?text=RENSANNING&bg_color=333333&text_color=00a2ff


（4）http://placehold.jp/
可以设置：宽度、高度、前景色、背景色、文字大小、图像格式（PNG/JPG）、文字、CSS

例如：
http://placehold.jp/46/cc9999/993333/320x240.png?text=RENSANNING


（5）http://placekitten.com/
这个除了能设置宽度和高度外，有趣的是图像都是猫。

比如：
http://placekitten.com/320/240


（6）http://placeimg.com/
这个除了能设置宽度和高度外，还可以指定输出图像的分类（animals、arch、nature、people、tech），图像的颜色（grayscale,sepia）

例如：
http://placeimg.com/320/240/tech/sepia


（7）http://lorempixel.com/
<img src="http://lorempixel.com/640/340/sports/">


（8）http://uifaces.com/


（9）http://cambelt.co/
可以指定Font或者显示Icon。
<img src="http://cambelt.co/300x200/rensanning?color=234653,eeeeee&font=Dyno-Bold">



更多：http://net.tutsplus.com/articles/web-roundups/the-top-8-placeholders-for-web-designers/

评论

1 楼 wzwahl36 2015-12-19  

maybe you need a image placeholder, http://github.atool.org/placeholder.js.html 一个开源的，有前端生成，很炫酷，不用依赖别人的服务，推荐给你…也可以加上…