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

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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