Lorem Picsum 佔位圖產生器

佔位符

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

佔位圖

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

Lorem Picsum

Lorem Picsum

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

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

https://picsum.photos/700

Lorem Picsum

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

https://picsum.photos/700/350

Lorem Picsum

多圖片產生

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

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

Lorem Picsum

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

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

Lorem Picsum

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

應用

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

總結

總結一下 Lorem Picsum 的特點:

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