之前介紹過 fakeimg 利用圖片來進行假圖佔位:
https://diary.tw/archives/1266
這裡介紹另一種方式來進行圖片佔位, holder.js 工具:
使用方式十分容易簡便, 引用 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 請參考: