How is it right to set a url address to the picture?



  • He wrote a training Vue component with a shablon. There was a problem with the url of the address to the image. I tried different options, but I couldn't solve the problem.

    How do I put the address to the picture taken from the facility?

    <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: &lt;li&gt; &lt;img src="{{comment.comment_image}}"/&gt; &lt;div&gt;id: {{comment.comment_id}}&lt;/div&gt; &lt;div&gt;Комментарий: {{comment.comment_description}}&lt;/div&gt; &lt;/li&gt;
    });

    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>



  • If any data are to be displayed dynamically, you should use a standard attribute, but with a two-way 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: &lt;li&gt; &lt;img :src="comment.comment_image"/&gt; &lt;div&gt;id: {{comment.comment_id}}&lt;/div&gt; &lt;div&gt;Комментарий: {{comment.comment_description}}&lt;/div&gt; &lt;/li&gt;
    });

    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>




Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2