<sw-image> Demo

Somewhat overengineered web component to create image placeholders. Find the source code on GitHub.

Default

<sw-image></sw-image>

Custom size

<sw-image width="200" height="200"></sw-image>

Responsive images

Shown inside 200px by 200px div containers.

<sw-image fluid></sw-image>
<sw-image fluid width="960" height="540"></sw-image>

Custom Text

<sw-image text="Custom text" width="200"></sw-image>

<sw-image text="Some long amount of text to see what happens" width="200"></sw-image>

Color

<sw-image bg-color="#009" text-color="#fff" width="200"></sw-image>

<sw-image bg-color="#a0a" text-color="#fff" width="200"></sw-image>

Inside an anchor

<a href="..."><sw-image text="Go to the GitHub Repository" width="200"></sw-image></a>

As an img element

<sw-image text="I am an &lt;img&gt; element" width="200"></sw-image>

Replaced element

Replace the <sw-image> element with an image. Output can be SVG or <img>.

<sw-image replace text="I am replaced with a &lt;svg&gt; element" width="200"></sw-image>

<sw-image replace img text="I am replaced with an &lt;img&gt; element"></sw-image>

<sw-image fluid width="960" height="540" class="img-fluid"></sw-image>
<sw-image fluid width="960" height="540" class="img-fluid"></sw-image>