Как правильно подставить url адрес до изображения?

#javascript #vuejs

Написал тренировочный Vue компонент с шаблоном. В шаблоне использовал шаблонные литералы
и возникла проблема с подстановкой url адреса до изображения. 
Перепробовал разные варианты, но решить проблему так и не смог.

Как в моем случае подставить адрес до изображения взятый из объекта?






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

			
			
id: {{comment.comment_id}}
			
Комментарий: {{comment.comment_description}}
			
`
});

new Vue({
  el: '#comments',
  data: {
    comments: queryComments
  },
});






    

Ответы

Ответ 1

Vue.JS позволяет привязать данные из javascript к шаблону при помощи директивы v-bind:src
или его сокращенной версии :src.
В вашем случае необходимо использовать следующую запись:



Ответ 2

Если какие-то данные должны подставляться динамически, то вы должны использовать
стандартный атрибут, но с двоеточием в начале:






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

			
			
id: {{comment.comment_id}}
			
Комментарий: {{comment.comment_description}}
			
`
});

new Vue({
  el: '#comments',
  data: {
    comments: queryComments
  },
});