【日常记录】【工具】随机生成图片的网站 Lorem Picsum

文章目录

- 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>