ポリマーでアレイに画像を追加する

Question

私はウェブサイトのデザインについて多くのことを知っていませんが、ここに私のものがあります。私はブログページを作成しています。タイトルと要約を含む配列を作成しました。私はそれに画像を追加して、カードレイアウトを作成したいと思います。私は画像を追加できるコードを見つけることができないようです。ここ

<div class="card"> 
     <div class="imgheader"></div> 
     <div class="container"> 
    <div id="title">[[item.title]]</div> 
    <div id="summary">[[item.summary]]</div> 
    <div id="image" img src="[[item.image]]"></div> 
    </div> 
    </div> 
</template> 

<app-footer></app-footer> 
</template> 

<script> 
class BlogPage extends Polymer.Element { 
    static get is() { return 'blog-page'; } 

    static get properties() { 
    return { 
     _blogPosts: { 
     type: Array, 
     value: function() { 
      return [ 
      {title: 'Mt. Mckinley', summary: ' A journey to the top of Denali. ', image:'web/images/Mckinley.jpg', }, 
      {title: 'Fishing', summary: 'Catching your largest trout', }, 
      {title: 'Camping', summary: 'Camping with the family', }, 

は、私が最初の配列のための画像タグ内の鉄のイメージとIMG srcを試してみましたが、私がこれまで行っているものです私は多くの知識を持っていけない、私はこれを行うには良い方法を教えてくださいポリマー私はちょうどhtmlとcssのコースを終了し、私はほとんどJavaを知っています。どんな助けもありがとう。

Answer 1

あなたは<dom-repeat>

コードの下

<template is="dom-repeat" items="{{_blogPosts}}"> 
     <div class="card"> 
      <div class="imgheader"></div> 
      <div class="container"> 
     <div id="title">[[item.title]]</div> 
     <div id="summary">[[item.summary]]</div> 
     <div id="image" img src="[[item.image]]"></div> 
     </div> 
     </div> 
    </template> 

のループで表示しようとしているかのように変更しよう：

<template is="dom-repeat" itmes="{{_blogPosts}}"> 
     <div class="card"> 
      <div class="imgheader"></div> 
      <div class="container"> 
      <div id="title">[[item.title]]</div> 
      <div id="summary">[[item.summary]]</div> 
      <div id="image"> 
       <img src="[[item.image]]"> 
      </div> 
      </div> 
     </div> 
    </template> 

も_blogPosts配列は、画像値または空を持って確認してください。