3

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

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

<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/[email protected]/dist/vue.js"></script>

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

2
  • попробуйте <img :src="comment.comment_image"/>
    – Bleser
    12 ноя 2018 в 12:38
  • Работает, спасибо! Отпишите в ответах, выберу Вас! 12 ноя 2018 в 12:46

2 ответа 2

2

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

2

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

<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/[email protected]/dist/vue.js"></script>

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

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.