Preview an image before it is uploaded VUEjs [duplicate]
Solution 1:
Please keep in mind that a browser cannot display all image types, (eg: a tiff won't work with this method).
There's a few steps:
- Have a file input with a
@changelistener - In the onChange, you create an object URL
- Use this URL to display the image
const vm = new Vue({
el: '#app',
data() {
return {
url: null,
}
},
methods: {
onFileChange(e) {
const file = e.target.files[0];
this.url = URL.createObjectURL(file);
}
}
})body {
background-color: #e2e2e2;
}
#app {
padding: 20px;
}
#preview {
display: flex;
justify-content: center;
align-items: center;
}
#preview img {
max-width: 100%;
max-height: 500px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<div id="app">
<input type="file" @change="onFileChange" />
<div id="preview">
<img v-if="url" :src="url" />
</div>
</div>