How is it right to set a url address to the picture?

[juvenalb]

He wrote a training Vue component with a shablon. There was a problem with the url of the address to the image. I tried different options, but I couldn't solve the problem.

How do I put the address to the picture taken from the facility?

<img src="{{comment.comment_image}}"/>

let queryComments = [{
    comment_id: 1,
    comment_image: '//loremflickr.com/100/100',
    comment_description: 'Looks great Julianne!',
  },
  {
    comment_id: 2,
    comment_image: '//loremflickr.com/100/100',
    comment_description: 'I love the sea',
  },
  {
    comment_id: 3,
    comment_image: '//loremflickr.com/100/100',
    comment_description: 'Where are you at?',
  }
];
Vue.component('template_comment', {

props: ['comment'],

template: <li>    <img src="{{comment.comment_image}}"/>    <div>id: {{comment.comment_id}}</div>    <div>Комментарий: {{comment.comment_description}}</div>    </li>

});
new Vue({

el: '#comments',

data: {

comments: queryComments

},

});

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>

<ul id="comments">

<template_comment v-for="comment in comments" v-bind:comment="comment">

</template_comment>

</ul>

[kalena]

If any data are to be displayed dynamically, you should use a standard attribute, but with a two-way at the beginning:

<img :src="comment.comment_image"/>

let queryComments = [{
    comment_id: 1,
    comment_image: '//loremflickr.com/100/100',
    comment_description: 'Looks great Julianne!',
  },
  {
    comment_id: 2,
    comment_image: '//loremflickr.com/100/100',
    comment_description: 'I love the sea',
  },
  {
    comment_id: 3,
    comment_image: '//loremflickr.com/100/100',
    comment_description: 'Where are you at?',
  }
];
Vue.component('template_comment', {

props: ['comment'],

template: <li>    <img :src="comment.comment_image"/>    <div>id: {{comment.comment_id}}</div>    <div>Комментарий: {{comment.comment_description}}</div>    </li>

});
new Vue({

el: '#comments',

data: {

comments: queryComments

},

});

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>

<ul id="comments">

<template_comment v-for="( comment, index ) in comments" v-bind:comment="comment" :key="index">

</template_comment>

</ul>