生成填充文字和图片

前端设计中有一个常见的单词叫placeholder，这个词往往表示其对应内容是当前页面中的临时填充内容。在前端页面的设计中，有时为了更好地看出布局效果，需要往页面一些地方填充文字或图片，这时能自动生成的填充文字（placeholder text）和自定义大小的填充图片（placeholder image）就派上用场了

生成填充文字

这里我是利用 Visual Studio Code 内置的 Emmet 语法来生成填充文字（一些主流的前端常用的编辑器都一般内嵌有填充文字的功能或者支持一些填充文字的插件）

需要输入的 emmet 指令是lorem。指令生效后会生成一段乱码形式的拉丁文字，称之为填充文字，placeholder text

通过此可以在进行前端页面设计时往需要填入文字的地方填入一些字段，方便设计出合理的布局效果。比如你在设计一个留言板，希望填入一些文字看看效果，此时就可以利用这些填充文字了。另外，一些开发人员在设计字体时，为了验证效果，也会使用这些填充文字

使用lorem指令的生成的文字填充叫Lorem Ipsum，实际上还有其他的 placeholder text ，想要了解更多信息可以通过以下链接了解：

https://placeholder.com/text/lorem-ipsum/
https://placeholder.com/text/

生成填充图片

这里，我介绍的生成填充图片的方式是利用一个特殊的链接生成填充图片：

https://via.placeholder.com
或者
http://via.placeholder.com

这个链接可以通过改变 URL 的路径（path）来生成指定大小、指定文字颜色以及指定背景颜色的填充图片，并且还可以通过修改询问字符串（query）指定文字内容

指定生成图片的大小

在https://via.placeholder.com的基础上添加图片的宽度或高度参数，可以生成指定大小的图片（单位为px）

比如现在要生成一个500x500的图片，可以使用一下任意一条URL：

https://via.placeholder.com/500
https://via.placeholder.com/500x500

这需要说明一下：

• 当所需图片的高宽相等时，可以省略高，只附上宽度值，这时默认高度和宽度相等
• 当高宽不等时，需要显式写出高宽，并且宽在前、高在后，用字母x连接起来（大小写都可以）。比如500x300的图片则需要写成https://via.placeholder.com/500x300
• 生成的图片正中间默认有尺寸高宽数值。比如上述的https://via.placeholder.com/500，生成的图片中间有“500x500”的字样。图片中的文字可以自行指定（见下文）
• 当两个相同尺寸的填充图片如果没有指定背景颜色，会自动产生不同的背景颜色（制定颜色见下文）
• 在使用时如果不指定高宽那么将无法生成图片

如何使用

一般都是直接在需要填充的地方放入一个图片标签<img/>，其中的src的值就是填充图片的URL