Polymer - Iron Image

The <iron-image> is an image-displaying element. The image is displayed with the useful sizing and preload options.

The sizing option either crops (cover) or letterboxes (contain) the image to fit within its specified size whereas the preload option blocks the image from getting rendered. Meanwhile, you can either use the element's CSS background-color as the placeholder or you can prefer a data-URI. The fade option fades out the image/color of the placeholder after rendering the image.

The <iron-image> element is similar to <img scr = "...."> as shown in the following code snippet −

<iron-image src = "http://lorempixel.com/600/600"></iron-image>

Example

To use the iron-image element, install the iron-image element using bower and import it in your index.html file. The following code displays a plain image −

<!DOCTYPE html>
<html>
   <head>
      <title>iron-image</title>
      <base href = "https://polygit.org/components/">
      <script src = "webcomponentsjs/webcomponents-lite.js"></script>
      <link rel = "import" href = "iron-image/iron-image.html">
   </head>
  
   <body>
      <h1>Iron-Image Example</h1>
      <iron-image src = "http://www.tcgreenmedia.com/wp-content/uploads/2014/07/google-developers-v01-510x380.png" 
         alt = "iron-image" ></iron-image>
   </body>
</html>

You will get the output as shown in the following screenshot.

Iron Image Plain

Use the option sizing = "cover"

<!DOCTYPE html>
<html>
   <head>
      <title>iron-image</title>
      <base href = "https://polygit.org/components/">
      <script src = "webcomponentsjs/webcomponents-lite.js"></script>
      <link rel = "import" href = "iron-image/iron-image.html">
  
      <style>
         #sizing-cover {
            width: 140px;
            height: 140px;
            background: LightGrey;
            margin-left: 20px;
         }
      </style>
   </head>
  
   <body>
      <h1>Example using sizing = "cover"</h1>
      <iron-image src = "http://www.tcgreenmedia.com/wp-content/uploads/2014/07/google-developers-v01-510x380.png"
         sizing = "cover" id = "sizing-cover" alt = "iron-image" ></iron-image>
   </body>
</html>

You will get the output as shown in the following screenshot.

Iron Image cover

Use the option sizing = "contain"

<!DOCTYPE html>
<html>
   <head>
      <title>iron-image</title>
      <base href = "https://polygit.org/components/">
      <script src = "webcomponentsjs/webcomponents-lite.js"></script>
      <link rel = "import" href = "iron-image/iron-image.html">
  
      <style>
         #sizing-contain {
            width: 140px;
            height: 140px;
            background: #ddd;
            margin-left: 20px;
         }
      </style>
   </head>
  
   <body>
      <h1>Example using sizing = "contain"</h1>
      <iron-image src = "http://www.tcgreenmedia.com/wp-content/uploads/2014/07/google-developers-v01-510x380.png"
         sizing = "contain" id = "sizing-contain" alt = "iron-image" ></iron-image>
   </body>
</html>

You will get the output as shown in the following screenshot.

Iron Image contain

The following code displays the grey background as well as base-64 encoded placeholder until the image is loaded.

<iron-image style = "width:800px; height:600px; background-color: grey;"
   placeholder = "data:image/jpeg;base64,..."
   sizing = "cover" preload src = "http://lorempixel.com/600/600"></iron-image>

The following code fades out the image after the image is rendered.

<iron-image style = "width:800px; height:600px; background-color: grey;"
   sizing = "cover" preload fade src = "http://lorempixel.com/600/600"></iron-image>

The following table shows the custom properties of <iron-image> element.

Sr.No Custom properties & Description Default
1

--iron-image-placeholder:

It is a mixin to be used to style for #placeholder.

 {}
2

--iron-image-width:

Use this property to set the width of the image wrapped by the iron-image.

 auto
3

--iron-image-height:

Use this property to set the height of the image, wrapped by the ironimage.

 auto
polymer_elements.htm
Advertisements