ポリマー-鉄画像

<iron-image>は画像表示要素です。画像は、便利なサイズ設定およびプリロードオプションとともに表示されます。

サイズ設定オプションは crops （カバー）または letterboxes （含む）のいずれかで、指定されたサイズに収まるようにしますが、プリロードオプションはイメージのレンダリングをブロックします。一方、要素のCSS background-colorをプレースホルダーとして使用することも、data-URIを使用することもできます。 fade オプションは、画像のレンダリング後にプレースホルダーの画像/色をフェードアウトします。

次のコードスニペットに示すように、<iron-image>要素は<img scr = "….">に似ています-

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

例

iron-image要素を使用するには、bowerを使用してiron-image要素をインストールし、indexlファイルにインポートします。次のコードは、プレーンな画像を表示します-

<!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-imagel">
   </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>

次のスクリーンショットに示すように出力を取得します。

アイロンイメージプレーン

オプション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-imagel">

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

次のスクリーンショットに示すように出力を取得します。

アイロン画像カバー

オプション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-imagel">

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

次のスクリーンショットに示すように出力を取得します。

鉄の画像を含む

次のコードは、画像がロードされるまで、灰色の背景とbase-64でエンコードされたプレースホルダーを表示します。

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

次のコードは、画像がレンダリングされた後に画像をフェードアウトします。

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

次の表に、<iron-image>要素のカスタムプロパティを示します。

Sr.No

Custom properties & Description

Default

1

--iron-image-placeholder:

placeholderのスタイル設定に使用されるmixinです。

\{}

2

--iron-image-width:

このプロパティを使用して、鉄の画像でラップされた画像の幅を設定します。

auto

3

--iron-image-height:

このプロパティを使用して、ironimageでラップされた画像の高さを設定します。

auto

Polymer-iron-image

ポリマー-鉄画像

例