imgs-html is a web component that extends img tag to have multiple sources. It will try the first source and fallback to later sources if it cannot load.

Build

npm install
npx tsc

It will generate imgs.js which is the file you can use.

Usage

Import imgs.js and you can use the exported img tag:

<img is="multi-imgs" srcs="https://example.com/img1.jpg https://example.com/img.jpg">

In the example above, you can have srcs to define multiple srcs in img. They are seperated by space. If the first link is failed to load, it will try the remains in order.

Other attributes (experimental):

• cache-result: cache the load result so that it will not try to load failed link next time.
• use-lock: if there are multiple places loading the same link, load them in order so that it will not need to be tried multiple times.