Lorem Picsum 佔位圖產生器

佔位符

版面已經規劃好，但是內容還沒的時候，需要一些假字來充版面，這些佔位符都是無意義的文字，但也有分段，也有標點符號，用來模擬真正的版面外觀，這些假字就叫佔位符，英文叫 lorem ipsum。

佔位圖

和佔位符一樣，用於模擬版面的內容，以往都是很苦工的自己畫一些備用，現在有佔位圖產生器來幫我們生出漂亮的佔位圖。

Lorem Picsum

Lorem Picsum

Lorem Picsum 利用簡單的網址呼叫就可以傳回隨機圖片，而且它的圖片都還滿好看的。

產生 700 * 700 px 的正方形圖片：

https://picsum.photos/700

產生 700 * 350 px 的長方形圖片：

https://picsum.photos/700/350

多圖片產生

像是照片牆、清單頁這種版型，一次需要生出大量同尺寸的佔位圖，如果用上面的做法，因為瀏覽器快取的機制，網址一樣的圖只要被請求一次就會進入快取區，後面同樣網址的圖就只會從快取區取用，如此整篇網頁都會是同一張圖，如果要避免用到快取，需要在 Lorem Picsum 的網址後面再加上 randoom 參數：

https://picsum.photos/700/350?random=1

random 後面的引數只要改變就會回傳不同的圖片：

https://picsum.photos/700/350?random=2

雖然範例上是寫 random，不過其實問號後面隨便打都是可以的，只要網址不同就不會被瀏覽器視為同一張圖片，就不會用到快取。

應用

除了當版型驗證之外，網誌清單頁的配圖難產的時候，或者沒有指定的時候，在前端模板用簡單的 if 判斷式在沒有指定的時候使用 Lorem Picsum 的隨機圖片，是個相當偷懶的做法。

總結

總結一下 Lorem Picsum 的特點：

• 可自訂長寬。
• 直接以網址取用，不用在自己的後端或前端裝任何套件。
• 支援 HTTPS。
• 提供模糊與灰階濾鏡。

有一些特點在上面的範例中沒提到，可以自己去看 Lorem Picsum 網站範例研究一下。