Как добавить данные полученные с сервера в свойство src?

Question

Мой компонент, который отвечает за отрисовку каждой строки, требуется добавить свойство для блока img. Там передается ссылка на картинку.

<template>
    <div class = "row__elements">
       <div @click="clickOnRow(elem, whichScreen)" class = "row__element" :class="{ active }">           
           <img class = "file-info icon" src = {{elem.icon}}/>           
           <div class = "file-info title"> {{elem.fileName}} </div>
           <div class = "file-info size"> {{elem.sizeOrType}} </div>
           <div class = "file-info date"> {{elem.dateOfChange}} </div>                          
        </div>
          
    </div>
</template>


<script>
export default {
    props:{
        elem:{
            type:Object,
            default: () => ({}),
                        
        },
        whichScreen:{
            type:Boolean,
            // default: false,
        },
        active: Boolean,
    },
    
    data()
        { 
            return{
                delay: 500,
                clicks: 0,
                timer: null,
                activeClass:"",
                object: {}                            
            } 
        },

данные выглядят вот так

[{"icon":"./../images/folder.png","fileName":"$AV_AVG","sizeOrType":"<папка>","dateOfChange":"04.Oct.2020 10:27:59","dir":"C:\\"},{"icon":"./../images/folder.png","fileName":"$Recycle.Bin","sizeOrType":"<папка>","dateOfChange":"11.May.2020 12:41:14","dir":"C:\\"},{"icon":"./../images/folder.png","fileName":"Documents and Settings","sizeOrType":"<папка>","dateOfChange":"04.Oct.2020 17:53:11","dir":"C:\\"},{"icon":"./../images/folder.png","fileName":"MagicPlusMini","sizeOrType":"<папка>","dateOfChange":"09.Jun.2020 21:10:24","dir":"C:\\"},{"icon":"./../images/folder.png","fileName":"PerfLogs","sizeOrType":"<папка>","dateOfChange":"15.May.2020 03:07:53","dir":"C:\\"},{"icon":"./../images/folder.png","fileName":"Program Files","sizeOrType":"<папка>","dateOfChange":"30.Sep.2020 21:06:15","dir":"C:\\"},{"icon":"./../images/folder.png","fileName":"Program Files (x86)","sizeOrType":"<папка>","dateOfChange":"30.Sep.2020 21:05:31","dir":"C:\\"},{"icon":"./../images/folder.png","fileName":"ProgramData","sizeOrType":"<папка>","dateOfChange":"30.Sep.2020 21:05:56","dir":"C:\\"},{"icon":"./../images/folder.png","fileName":"test","sizeOrType":"<папка>","dateOfChange":"05.Oct.2020 11:15:07","dir":"C:\\"},{"icon":"./../images/folder.png","fileName":"test2","sizeOrType":"<папка>","dateOfChange":"05.Oct.2020 21:53:19","dir":"C:\\"},{"icon":"./../images/folder.png","fileName":"totalcmd","sizeOrType":"<папка>","dateOfChange":"25.Sep.2020 13:57:06","dir":"C:\\"},{"icon":"./../images/folder.png","fileName":"Users","sizeOrType":"<папка>","dateOfChange":"04.Oct.2020 17:53:11","dir":"C:\\"},{"icon":"./../images/folder.png","fileName":"Windows","sizeOrType":"<папка>","dateOfChange":"03.Oct.2020 10:00:57","dir":"C:\\"}]

Данные приходят в виде объекта elem из родительского элемента.

Answer 1

Во Vue синтаксис двойных фигурных скобок не работает с HTML-атрибутами. Используйте вместо него директиву v-bind (или сокращенная форма - :):

<div v-bind:id="dynamicId"></div>

или

<div :id="dynamicId"></div>

Более подробно об атрибутах можете почитать здесь, а также рекомендую хорошо ознакомиться с директивой v-bind

Пример привожу для наглядности:

Vue.component('mycomponent', {
  props: {
    elem: {
      type: Object,
      default: () => ({}),
    }
  },
  template: `
  <fieldset>
  <legend>Строка {{ elem.id }}</legend>
    <div class="row__elements">
    <div class="row__element">
      <img class="file-info icon" :src="elem.icon"/>
      <div class="file-info title"> {{elem.fileName}} </div>
      <div class="file-info size"> {{elem.sizeOrType}} </div>
      <div class="file-info date"> {{elem.dateOfChange}} </div>
    </div>
   </div>
  </fieldset>
  `
})

new Vue({
  el: '#app',
  data: {
    elemForComponent: [{
      id: 1,
      icon: 'https://www.prchecker.info/free-icons/128x128/demo_128_px.png',
      fileName: 'fileName test',
      sizeOrType: '1234',
      dateOfChange: '12.01.2020'
    }, {
      id: 2,
      icon: 'https://www.prchecker.info/free-icons/128x128/demo_128_px.png',
      fileName: 'fileName test 2',
      sizeOrType: '5678',
      dateOfChange: '12.03.2020'
    }]
  }
})

.row__element {
  display: flex;
}

.row__element div {
  padding: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
  <mycomponent v-for="elem in elemForComponent" :elem="elem">
  </mycomponent>
</div>

Дополнительный пример работы с относительными путями:

https://codesandbox.io/s/test-src-image-vg735

БЛОГ НА HUSL

Как добавить данные полученные с сервера в свойство src?

Ответы (1 шт):