I changed my select file to read with base64 and now my images don't display correctly on the screen. It should still be an array, but when i change it--it keeps binding infinite images. can someone see what the issue is?
new Vue({
el: "#app",
data: {
fileBase64: [],
},
methods: {
async handleFiles(event) {
var reader = new FileReader()
reader.readAsDataURL(event.target.files[0])
reader.onload = () => {
this.fileBase64 = reader.result;
};
},
}
}).flipper {
display: grid;
grid-gap: 1ch;
grid-template-columns: repeat(5, 1fr);
}
#preview img {
max-width: 100%;
max-height: 100px;
padding-right:2px;
border: 1px solid;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<p><input type="file" id="input" multiple="multiple" @change="handleFiles"></p>
<div class="flipper">
<div id="preview" v-for="(img, i) in fileBase64" :key="i">
<img :src="img" />
</div>
</div>
</div>