3.0.2 • Published 6 years ago

@polymer/iron-image v3.0.2

Weekly downloads
7,060
License
BSD-3-Clause
Repository
github
Last release
6 years ago

Published on NPM Build status Published on webcomponents.org

<iron-image>

iron-image is an element for displaying an image that provides useful sizing and preloading options not found on the standard <img> tag.

See: Documentation, Demo.

Usage

Installation

npm install --save @polymer/iron-image

In an HTML file

<html>
  <head>
    <script type="module">
      import '@polymer/iron-image/iron-image.js';
    </script>
    <style>
      iron-image {
        width: 400px;
        height: 400px;
        background-color: lightgray;
      }
    </style>
  </head>
  <body>
    <iron-image sizing="cover" preload src="http://lorempixel.com/600/400"></iron-image>
  </body>
</html>

In a Polymer 3 element

import {PolymerElement} from '@polymer/polymer/polymer-element.js';
import {html} from '@polymer/polymer/lib/utils/html-tag.js';

import '@polymer/iron-image/iron-image.js';

class ExampleElement extends PolymerElement {
  static get template() {
    return html`
      <iron-image sizing="contain" fade src="http://lorempixel.com/600/400"></iron-image>
    `;
  }
}

customElements.define('example-element', ExampleElement);

Contributing

If you want to send a PR to this element, here are the instructions for running the tests and demo locally:

Installation

git clone https://github.com/PolymerElements/iron-image
cd iron-image
npm install
npm install -g polymer-cli

Running the demo locally

polymer serve --npm
open http://127.0.0.1:<port>/demo/

Running the tests

polymer test --npm
web-componentspolymermedia
@polymer/polymer
@codin/polymer-cardzagen-zagen@infinitebrahmanuniverse/nolb-_pol@everything-registry/sub-chunk-731wise-shopping-cart@collaborne/authorized-image@aspen-elements/aspen-nav-menu@chronos/b7-gallery@haxtheweb/person-testimonial@hatiolab/things-shell@lrnwebcomponents/lrndesign-image@lrnwebcomponents/lrnapp-cis@lucentray/pine-web-components@lrnwebcomponents/contenta-polymer@longlost/app-shell@longlost/braintree-badge@longlost/app-account@longlost/app-ecomm@longlost/cms-carousels@longlost/db-image@longlost/lazy-image@lrnwebcomponents/sites-listing@lrnwebcomponents/person-testimonial@neogrup/nc-items-grid@neogrup/nc-avatar@fabricelements/fabric-imgix@kano/kwc-badge@kano/kwc-follow-item@kano/kwc-share-card@kano/kwc-share-detail@kano/kwc-share-player@kano/web-components@kano/kwc-picker@juanbeato/jb-product-card@polymer/paper-card@polymer/iron-elements@nuxeo/nuxeo-ui-elements@nuskin/ns-dev-portal@spriteful/app-account@spriteful/app-camera@spriteful/app-shell@spriteful/asg-event-shared-elements@spriteful/asg-search@spriteful/asg-shop-card-details@spriteful/asg-shop-card-item@spriteful/asg-small-event-details@spriteful/asg-small-event-template@spriteful/braintree-badge@spriteful/cms-carousels@spriteful/cms-image-editor@spriteful/db-image@spriteful/fancy-header-example@spriteful/file-uploader@spriteful/lazy-carousel@spriteful/spriteful-account@spriteful/spriteful-app-shell@spriteful/spriteful-braintree-badge@spriteful/spriteful-cms-carousels@spriteful/spriteful-cms-image-editor@spriteful/spriteful-db-image@spriteful/spriteful-lazy-carousel@smyd/cms-elements@smyd/app-shell@smyd/asg-event-shared-elements@smyd/asg-search@smyd/asg-shop-card-details@smyd/asg-shop-card-item@smyd/braintree-badge@silverlinkz/sl-galleryoe-inputnodecgnodecg-twitchieplastic-imageposition-tablesoccer-match-resultsoccer-cardgoal-scorer-cardinclind-storybooklive-localizer@wcd/eaztech101.ist402-demo-cards-example-fork-k0wvn9jg@wcd/jnb5409.ist402-demo-cards-example-fork-k0wms0wk@wcd/8bitdav.ist402-demo-cards-example-fork-k0x6phn3@wcd/csgitdegrees.ist402-demo-cards-example-fork-k0x4p3jd-fork-k0x4pdkt-fork-k0x4pu9a@wcd/chemiskitty.ist402-demo-cards-example-fork-k0x6uwv9-fork-k0xa5pli@wcd/techiana.ist402-demo-cards-example-fork-k0yeekli@wcd/techsiggs.ist402-demo-cards-example-fork-k0wvao1a@wcd/psulions.ist402-demo-cards-example-fork-k0ue36tj-fork-k0ue3ctb-fork-k0uelsun@things-real/shellasg-small-event-templateflag-iconflag-cc
3.0.2

6 years ago

3.0.1

7 years ago

3.0.0

7 years ago

3.0.0-pre.26

7 years ago

3.0.0-pre.25

7 years ago

3.0.0-pre.24

7 years ago

3.0.0-pre.23

7 years ago

3.0.0-pre.22

7 years ago

3.0.0-pre.21

7 years ago

3.0.0-pre.20

7 years ago

3.0.0-pre.19

7 years ago

3.0.0-pre.18

7 years ago

3.0.0-pre.17

7 years ago

3.0.0-pre.16

7 years ago

3.0.0-pre.15

7 years ago

3.0.0-pre.14

7 years ago

3.0.0-pre.13

7 years ago

3.0.0-pre.12

7 years ago

3.0.0-pre.11

7 years ago

3.0.0-pre.10

7 years ago

3.0.0-pre.8

7 years ago

3.0.0-pre.7

7 years ago

3.0.0-pre.6

7 years ago

3.0.0-pre.4

7 years ago

3.0.0-pre.3

7 years ago

3.0.0-pre.2

7 years ago

3.0.0-pre.1

8 years ago

1.2.5-pre.3

8 years ago

1.2.5-pre.2

8 years ago

1.2.5-pre.1

8 years ago

0.0.4

8 years ago

0.0.3

9 years ago

0.0.1

9 years ago