Написал тренировочный 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>
<img :src="comment.comment_image"/>