A simple component that adds a fallback url and logging function to an image. Made with Stencil Component Starter.
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/better-img-stencil.js"></script>
<!-- or from node modules -->
<script src="../node_modules/@pearlbea/better-img/src/better-img/dist/better-img-stencil.js"></script>
<!-- use the component on your page -->
<better-img-stencil
url="https://placeimg.com/480/640/animals"
fallback="https://lorempixel.com/480/640"
log="logMe"
width="480"
height="640"
alt="an adorable animal">
</better-img-stencil>| 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 dev
$ npm test