Skip to content
This repository has been archived by the owner on Dec 28, 2024. It is now read-only.

PolymerElements/iron-image

Folders and files

NameName
Last commit message
Last commit date
Jan 24, 2018
Aug 7, 2018
Jul 18, 2018
Aug 16, 2018
Aug 16, 2018
Sep 7, 2018
May 17, 2016
Jul 18, 2018
Sep 14, 2018
Jul 18, 2018
Jun 19, 2019
Jun 23, 2018
Nov 6, 2019
Apr 26, 2019
Jun 5, 2018

Repository files navigation

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