@polymer/iron-image NPM | npm.io

3.0.2 • Published 5 years ago

Install

Weekly downloads

7,060

License

BSD-3-Clause

Repository

Last release

5 years ago

<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-components polymer media

@polymer/polymer

@codin/polymer-card zagen-zagen @infinitebrahmanuniverse/nolb-_pol @everything-registry/sub-chunk-731 @silverlinkz/sl-gallery @smyd/app-shell @smyd/asg-event-shared-elements @smyd/asg-search @smyd/asg-shop-card-details @smyd/asg-shop-card-item @smyd/braintree-badge @smyd/cms-elements @lrnwebcomponents/sites-listing @neogrup/nc-avatar @neogrup/nc-items-grid @longlost/app-account @longlost/app-ecomm @longlost/app-shell @longlost/braintree-badge @longlost/cms-carousels @longlost/db-image @longlost/lazy-image @juanbeato/jb-product-card nodecg nodecg-twitchie @kano/kwc-badge @kano/kwc-follow-item position-table @kano/kwc-picker @kano/kwc-share-card @kano/kwc-share-detail @kano/kwc-share-player @kano/web-components @lrnwebcomponents/person-testimonial @lrnwebcomponents/lrnapp-cis @lrnwebcomponents/contenta-polymer @lrnwebcomponents/lrndesign-image @nuxeo/nuxeo-ui-elements @nuskin/ns-dev-portal @lucentray/pine-web-components soccer-card soccer-match-result @things-real/shell @polymer/iron-elements @polymer/paper-card wise-shopping-cart @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-db-image @spriteful/spriteful-lazy-carousel @spriteful/spriteful-account @spriteful/spriteful-app-shell @spriteful/spriteful-braintree-badge @spriteful/spriteful-cms-carousels @spriteful/spriteful-cms-image-editor @aspen-elements/aspen-nav-menu flag-icon flag-cc live-localizer @collaborne/authorized-image goal-scorer-card inclind-storybook @chronos/b7-gallery @fabricelements/fabric-imgix oe-input @hatiolab/things-shell plastic-image @wcd/eaztech101.ist402-demo-cards-example-fork-k0wvn9jg @wcd/jnb5409.ist402-demo-cards-example-fork-k0wms0wk @wcd/psulions.ist402-demo-cards-example-fork-k0ue36tj-fork-k0ue3ctb-fork-k0uelsun @wcd/techiana.ist402-demo-cards-example-fork-k0yeekli @wcd/techsiggs.ist402-demo-cards-example-fork-k0wvao1a @wcd/csgitdegrees.ist402-demo-cards-example-fork-k0x4p3jd-fork-k0x4pdkt-fork-k0x4pu9a @wcd/chemiskitty.ist402-demo-cards-example-fork-k0x6uwv9-fork-k0xa5pli @wcd/8bitdav.ist402-demo-cards-example-fork-k0x6phn3 asg-small-event-template

5 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

8 years ago

8 years ago