[筆記] Lorem Picsum 網頁開發自動生成縮圖

章節連結

當嘗試編寫網頁前端程式碼時,往往會遇上需要產生特定大小圖片來確定版型狀態的問題。Lorem Picsum 前身為 Unsplash It,這個網站提供便利的方法來自動生成圖片。你唯一要做的就是貼上特定的網址來告知瀏覽器來抓圖片。
lorem picsum cover photo


操作方法

1.進入官網 https://picsum.photos/ 後,在官網網址的後方直接加入寬度和高度的數值即可。
例如:https://picsum.photos/200/300 就是隨機生成 寬200px 高300px 的圖片
CSS,HTML,https://picsum.photos,i.picsum.photos,image lorem,lorem image,lorem picsum,picsum,picsum photos,selfStudyProgrammingRecord2.若你只是要生成方形圖片,那僅需給一個數值即可。
例如:https://picsum.photos/200 表示生成 寬高都是 200px 的圖片

CSS,HTML,https://picsum.photos,i.picsum.photos,image lorem,lorem image,lorem picsum,picsum,picsum photos,selfStudyProgrammingRecord P.S. 請注意,寬高的數值都需為正整數,且個位數一定要是”0″,不然會出現錯誤。

3.若你想生成特定 ID 的圖片,可以用/id/{image} 來指定。完整的圖庫可見此
例如:https://picsum.photos/id/1001/200/300CSS,HTML,https://picsum.photos,i.picsum.photos,image lorem,lorem image,lorem picsum,picsum,picsum photos,selfStudyProgrammingRecord想要灰階 Grayscale、模糊 Blur 等進階用法者,可以點入關往後看詳細說明。

按讚加入粉絲團

延伸閱讀