Wrote a training Vue component with a template. The template used template literals and there was a problem with the substitution of the url address before the image. I tried different options, but I could not solve the problem.

How in my case to substitute the address to the image taken from the object?

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

  • try <img :src="comment.comment_image"/> - Bleser
  • It works, thanks! Write down in the answers, choose you! - Mike_Ro

2 answers 2

Vue.JS allows you to bind data from javascript to a template using the directive v-bind:src or its abbreviated version :src .
In your case, you must use the following entry:
<img :src="comment.comment_image"/>

    If some data must be dynamically substituted, then you must use the standard attribute, but with a colon 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>