Adding an Image to an array with polymer - arrays

Question

i dont know much about website design but here is what i have. I am creating a blog page and i have created an array with the title and summary. I want to add an image to that then create a card layout for it. I cannot seem to find code where i can also add an image. here is what i have done so far,
<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', },
i have tried iron image and img src inside the image tag for the first array please let me know of a better way to do this, i dont have much knowledge of polymer i just finished a course on html and css, and i barely know java. any help would be appreciated.

Answer 1

If you are trying to show in loop of <dom-repeat> below code
<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>
try to change as :
<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>
Also check _blogPosts array has an image value or empty.