Polymer Iron-Image

The <iron-image> element is used to display an image. You can display the image with the useful sizing and preload options.

The sizing option is used to crop/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:

Example

<!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> 

Output: