Polymer Iron Image

by Online Tutorials Library July 14, 2022

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-510×380.png”            alt = “iron-image” ></iron-image>     </body>  </html>   

Output:

iron image

Next TopicIron Dropdown

Polymer Iron Image

Polymer Iron-Image

Example

Affinity Photo Vs. Photoshop

Basic Python for Java Developers

You may also like