0.0.7 • Published 3 years ago

@mschreiber68/img-fallback v0.0.7

Weekly downloads
-
License
MIT
Repository
github
Last release
3 years ago

Usage

import ImgFallback from '@mschreiber68/img-fallback';
<img-fallback src="https://example.com/fallback-image.png">
    <img src="https://example.com/intended-image.png">
</img-fallback>

Installation

Install via NPM:

npm i @mschreiber68/img-fallback

Download via CDN:

<script type="module" src="https://unpkg.com/@mschreiber68/img-fallback@latest/dist/index.js"></script>

With either installation method, you must register the component as a custom element. This allows you to customize the name of the element.

Features

  • Supports mutations (add/modify/remove) of wrapped <img> element
  • Uses display: contents; so the <img> can be treated by layout styles as if the <img-fallback> isn't there.
  • As a web component that doesn't modify its internal DOM, <img-fallback> is compatible with any frontend framework.

In order to simplify the implementation, fallback behavior is only applied to a single <img> in the inner DOM, and this <img> must be the first child of <img-fallback>.

Demo

https://mschreiber68.github.io/img-fallback/demo.html

0.0.7

3 years ago

0.0.6

3 years ago

0.0.5

3 years ago

0.0.4

3 years ago

0.0.3

3 years ago

0.0.2

3 years ago

0.0.1

3 years ago