免费占位图网站推荐

在开发网站时,通常需要填充一些图片来预览页面效果,如果没有合适的素材,这时我们就需要占位图片,通过 URL 定制形如 sitename.com/width/height 的地址就可以得到一个随机的占位图片。下面就来细数10个优秀的占位图片生成网站。(原文,已删除失效的网站)

Placehold.it

A quick and simple image placeholder service.

<img src="http://placehold.it/350x200" />
<img src="http://placehold.it/300/09f/fff.png" />
<img src="http://placehold.it/300&text=placehold.it+rocks!" />

Placehold.it
可定制:图片格式、背景颜色、文本、文本颜色、图像尺寸

lorempixel

Placeholder Images for every case. Webdesign or Print. Just put a custom url in your html and you receive a proper placeholder picture

<img src="http://lorempixel.com/350/200" />
<img src="http://lorempixel.com/350/200/sports" />
<img src="http://lorempixel.com/350/200/sports/Dummy-Text" />

lorempixel
可定制:图像分类、文本、图像尺寸、灰度图片

Fake images please?

Fakeimg.pl is a little tool that generates images with an URL. Choose the size, the colors, even the text.

<img src="http://fakeimg.pl/350x200/" />
<img src="http://fakeimg.pl/350x200/ff0000/000" />
<img src="http://fakeimg.pl/350x200/?text=World&font=lobster" />

Fake images please?
可定制:背景颜色、文本、文本颜色、图像尺寸、文本字体

{placekitten}

A quick and simple service for getting pictures of kittens for use as placeholders in your designs or code.

<img src="http://placekitten.com/350/200" />
<img src="http://placekitten.com/g/350/200" />

{placekitten}
可定制:图像尺寸、灰度图片

FPOImg.com

provide an easy way to generate placeholder images for your designs whether it be for web development, print, or a school paper

<img src="http://fpoimg.com/350x200" />
<img src="http://fpoimg.com/350x200?text=Advertisement" />
<img src="http://fpoimg.com/350x200?text=Advertisement&bg_color=000000&text_color=666666" />

FPOImg.com
可定制:图像尺寸、背景色、文本色、文本

Dynamic Dummy Image Generator

Dynamic Dummy Image Generator

<img src="http://dummyimage.com/350x200/200/fff" />
<img src="http://dummyimage.com/350x4:3" />
<img src="http://dummyimage.com/350/09f/fff.png" />

Dynamic Dummy Image Generator
可定制:图像尺寸、等比尺寸、背景色、文本色、格式、文本

占位图

占位图生成器

<img src="http://zhanweitu.com/350/200" />

占位图
可定制:图像尺寸、文本

功能对比表

图像尺寸 背景色 文本 文本色 灰度图片 格式 其他特点
注:*表示高度可选,缺省时输出正方形
Placehold.it √* gif, jpeg, jpg, png
lorempixel 13种图片分类
Fake images please? √* 可设置字体
{placekitten} √* 图片均为喵星人
hhhhold! √* jpg, png, gif 多种尺寸参数,图片来自 ffffound
Instasrc 36种图片分类
FPOImg.com
Dynamic Dummy Image Generator png, gif, jpg 可按比例输出大小
占位图 国内网站,速度较快
The Random Image Generator 抽象背景,批量生成

关注我

我的微信公众号:前端开发博客,在后台回复以下关键字可以获取资源。

  • 回复「小抄」,领取Vue、JavaScript 和 WebComponent 小抄 PDF
  • 回复「Vue脑图」获取 Vue 相关脑图
  • 回复「思维图」获取 JavaScript 相关思维图
  • 回复「简历」获取简历制作建议
  • 回复「简历模板」获取精选的简历模板
  • 回复「加群」进入500人前端精英群
  • 回复「电子书」下载我整理的大量前端资源,含面试、Vue实战项目、CSS和JavaScript电子书等。
  • 回复「知识点」下载高清JavaScript知识点图谱

每日分享有用的前端开发知识,加我微信:caibaojian89 交流