A simple Polymer element 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.
Example:
<!-- load the element from unkpg -->
<script src="https://unpkg.com/@pearlbea/[email protected]/dist/bundle.js"></script>
<!-- or from node modules -->
<script src="../node_modules/@pearlbea/better-img-polymer/better-img-polymer.js"></script>
<!-- use the component on your page -->
<better-img-polymer
url="https://placeimg.com/480/640/animals"
fallback="https://lorempixel.com/480/640"
alt="an adorable animal">
</better-img-polymer>| 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. |
$ npm run serve
As of this writing, Polymer tests were not working with Node 10. See the issue on GitHub.
$ npm test