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

最新推荐文章于 2024-06-17 23:49:16 发布

嘤嘤怪呆呆狗

最新推荐文章于 2024-06-17 23:49:16 发布

阅读量821

点赞数 15

分类专栏：日常记录文章标签： vue 前端 js 图片占位符

本文链接：https://blog.csdn.net/qq_45634593/article/details/136661916

版权

日常记录专栏收录该内容

30 篇文章 0 订阅

订阅专栏

本文介绍了LoremPicsum这个免费图片占位符服务，如何通过API获取定制尺寸的图片，以及如何处理图片缓存以减少重复加载。同时展示了Emmet缩写语法在生成大量img元素中的应用。

摘要由CSDN通过智能技术生成

文章目录

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 缩写语法

在这里插入图片描述

嘤嘤怪呆呆狗

关注

15
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
【日常记录】【工具】随机生成图片的网站 Lorem Picsum

Lorem Picsum 是一个`免费的图片占位符服务`，可以用于网站、应用程序或任何需要占位符图片的地方。它提供了一个简单的 API，可以通过 HTTP 请求获取随机图片，也可以指定特定的图片大小和其他参数。Lorem Picsum 还提供了一个网站，可以在其中浏览和下载图片
复制链接

扫一扫