Image Placeholder

BsImageHolder is a lightweight component which is primarily used to create SVG shape to visualize image placeholder.

Updated on v2.0.0

Usage Examples

The following are examples that demonstrate how to use the <bs-image-holder>.

Rectangle

Non Rectangle

API Reference

Property	Type	Default	Description
bg-color	String	'#868e96'	Component background color, must be in html hex coloring number.
circle	Boolean	false	Create SVG with circle shape.
height	Number/String		The component height. Numbers get converted to pixel values. Any other value must include the units (such as px, em, rem, %). If undefined, then will automatically adjust to container height.
place-holder deprecated	String		Use placeholder-text property instead.
placeholder-text	String		The text to display inside created SVG. v2.0.0
rounded	Boolean	false	Create component with rounded shape. If circle and rounded are not set, then component shape will become rectangle.
size	Number/String		Shortcut to create ImageHolder with equal height and width.
text-color	String	'#dee2e6'	Text color, must be in html hex coloring number.
width	Number/String	'100%'	The component width. Numbers get converted to pixel values. Any other value must include the units (such as px, em, rem, %).
x-pos	Number/String	'50%'	placeholder-text placement at x-axis.
y-pos	Number/String	'50%'	placeholder-text placement at y-axis.