holder.js圖片佔位器

之前介紹過 fakeimg 利用圖片來進行假圖佔位:

https://diary.tw/archives/1266

這裡介紹另一種方式來進行圖片佔位, holder.js 工具:

http://holderjs.com/

使用方式十分容易簡便, 引用 holder.js 後, 直接下達參數即可順利使用, 也可以指定寬高與文字內容, 中文字也可以哦. 生成的方式是動態的 SVG 進行, demo 程式如下:

<img src="holder.js/300x200">
<img src="holder.js/300x200?theme=sky">
<img src="holder.js/300x200?bg=2a2025&text=Hello">
<img src="holder.js/300x200?bg=f3f2fe&fg=001100&text=中文字也可以哦!">

於 codepen.io 上的 demo 請參考:

https://codepen.io/timhuang/pen/MRdwyO