测试用占位图像的生成工具 (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
测试用占位图像的生成工具 (Placeholder Image / Image Mocking)

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

例如:
http://placehold.jp/46/cc9999/993333/320x240.png?text=RENSANNING
测试用占位图像的生成工具 (Placeholder Image / Image Mocking)

(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
测试用占位图像的生成工具 (Placeholder Image / Image Mocking)

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


(8)http://uifaces.com/
测试用占位图像的生成工具 (Placeholder Image / Image Mocking)

(9)http://cambelt.co/
可以指定Font或者显示Icon。
<img src="http://cambelt.co/300x200/rensanning?color=234653,eeeeee&font=Dyno-Bold">
测试用占位图像的生成工具 (Placeholder Image / Image Mocking)


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

你可能感兴趣的:(placeholder)