Polymère - Image de fer

<iron-image> est un élément d'affichage d'image. L'image s'affiche avec les options utiles de dimensionnement et de précharge.

L'option de dimensionnement soit crops (couverture) ou letterboxes(contient) l'image pour qu'elle tienne dans sa taille spécifiée tandis que l'option de préchargement empêche l'image d'être rendue. En attendant, vous pouvez soit utiliser la couleur d'arrière-plan CSS de l'élément comme espace réservé, soit préférer un URI de données. lefade L'option fait disparaître l'image / la couleur de l'espace réservé après le rendu de l'image.

L'élément <iron-image> est similaire à <img scr = "...."> comme illustré dans l'extrait de code suivant -

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

Exemple

Pour utiliser l'élément iron-image, installez l'élément iron-image à l'aide de bower et importez-le dans votre fichier index.html. Le code suivant affiche une image simple -

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

Vous obtiendrez la sortie comme indiqué dans la capture d'écran suivante.

Utilisez l'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>

Vous obtiendrez la sortie comme indiqué dans la capture d'écran suivante.

Utilisez l'option sizing = "contenir"

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

Vous obtiendrez la sortie comme indiqué dans la capture d'écran suivante.

Le code suivant affiche l'arrière-plan gris ainsi que l'espace réservé encodé en base 64 jusqu'à ce que l'image soit chargée.

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

Le code suivant fait disparaître l'image une fois l'image rendue.

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

Le tableau suivant montre les propriétés personnalisées de l'élément <iron-image>.

Sr. Non Propriétés personnalisées et description Défaut
1

--iron-image-placeholder:

C'est un mixin à utiliser pour styliser #placeholder.

 {}
2

--iron-image-width:

Utilisez cette propriété pour définir la largeur de l'image enveloppée par l'image de fer.

 auto
3

--iron-image-height:

Utilisez cette propriété pour définir la hauteur de l'image, enveloppée par l'image ironique.

 auto