Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
src/better-img
test
.gitignore
.travis.yml
README.md
index.html
karma.conf.js
license.md
package.json

README.md

Published on webcomponents.org

better-img

A vanilla component that adds a fallback url and logging function to an image.

Installation

Install the npm package or add the script from unkpg to your HTML page. If you want to use this component in browsers that do not support Custom Elements v1, use the webcomponentsjs polyfill.

Example:

<!-- load the polyfill, if necessary -->
<script src="https://unpkg.com/@webcomponents/webcomponentsjs@2.0.0/webcomponents-bundle.js"></script>

<!-- then load the element from unkpg -->
<script src="https://unpkg.com/@pearlbea/better-img@1.4.0/src/better-img/better-img.min.js"></script>

<!-- or from node modules -->
<script src="../node_modules/@pearlbea/better-img/src/better-img/better-img.min.js"></script>

<!-- use the component on your page -->
<better-img
  url="https://placeimg.com/480/640/animals"
  fallback="https://lorempixel.com/480/640"
  alt="an adorable animal">
</better-img>

Usage

property type default description
url (required) string null An image url. This will become the image's "src" attribute.
fallback string null An image url. If the url provided returns an error, the fallback url will be assigned to the "src" attribute.
width number 480 Image width
height number 640 Image height
alt string "" Image alt text
log string null If you provide the name of a function, it will be called if the url returns an error and receive the error object as a parameter.

Running the tests

To setup the testing tools:

npm install

Then to run the tests:

npm test

Tests use web-component-tester, which does not work on Node 10. See the web-component-tester docs for more info.

Viewing your component

npm start

License

MIT