A vanilla component that adds a fallback url and logging function to an image.
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/[email protected]/webcomponents-bundle.js"></script>
<!-- then load the element from unkpg -->
<script src="https://unpkg.com/@pearlbea/[email protected]/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>| 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. |
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.
npm start