Как при загрузке файла показать его превью, на примере vue.js?

Question

[semki096]

В data - у меня лежат загружаемые файлы из <input type="file">.

new Vue({
    el: '#app',
    data: function (){
                  return {
                    files: []
                  }
},
....................

Дальше я вывожу названия файлов циклом

<ul>
        <li v-for="file in files">
                <p>{{file.name}}</p>
        </li>
</ul>`

Вопрос - как рядом с именем файла вывести его превью? Интересует именно vue.js way. Буду благодарен за подсказку.

Answer 1

[Кирюшка Цисарь]

У тебя на input должен стоять @change функция к примеру, который ты через e.target.files, new fileReader и readAsDataURL() - записываешь в массив, а в цикле уже выводишь img с src="data"