文章目录
- 1、介绍
- 2、获取固定宽高的图片
- 3、处理图片缓存
- 4、 Emmet 缩写语法
1、介绍
Lorem Picsum 是一个
免费的图片占位符服务，可以用于网站、应用程序或任何需要占位符图片的地方。它提供了一个简单的 API，可以通过 HTTP 请求获取随机图片，也可以指定特定的图片大小和其他参数。Lorem Picsum 还提供了一个网站，可以在其中浏览和下载图片。这些图片都是由 Unsplash 社区的摄影师上传的，可以免费用于个人和商业用途。
Lorem Picsum 官网地址
2、获取固定宽高的图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h3>获取指定宽度和高度的图片</h3>
<img src="https://picsum.photos/200/300">
</body>
</html>
/200/300
第一个参数是宽度，第二个参数是高度，传递一个参数，表示 宽度和高度相等
3、处理图片缓存
往往在开发过程中，一般需要很
多张图片，但是用的时候会发现，很多张的时候，图片内容是一样的，这是因为浏览器的缓存导致，一张图片浏览器下载后，再次遇到相同的路径，浏览器会缓存里获取图片
Emmet 缩写语法：img[src="https://picsum.photos/200?$"]*20 快速生成 img 元素并且生成地址
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
img[src="https://picsum.photos/200?$"]*20
<h3>获取指定宽度和高度的图片</h3>
<img src="https://picsum.photos/200?1" alt="">
<img src="https://picsum.photos/200?2" alt="">
<img src="https://picsum.photos/200?3" alt="">
<img src="https://picsum.photos/200?4" alt="">
<img src="https://picsum.photos/200?5" alt="">
<img src="https://picsum.photos/200?6" alt="">
<img src="https://picsum.photos/200?7" alt="">
<img src="https://picsum.photos/200?8" alt="">
<img src="https://picsum.photos/200?9" alt="">
<img src="https://picsum.photos/200?10" alt="">
<img src="https://picsum.photos/200?11" alt="">
<img src="https://picsum.photos/200?12" alt="">
<img src="https://picsum.photos/200?13" alt="">
<img src="https://picsum.photos/200?14" alt="">
<img src="https://picsum.photos/200?15" alt="">
<img src="https://picsum.photos/200?16" alt="">
<img src="https://picsum.photos/200?17" alt="">
<img src="https://picsum.photos/200?18" alt="">
<img src="https://picsum.photos/200?19" alt="">
<img src="https://picsum.photos/200?20" alt="">
</body>
</html>
4、 Emmet 缩写语法
