I'm using Quasar framework and Vue
I have input element that gets picked image after that I send It to servlet where I process that image and storing in a folder.If It was successfully I send simple message which will be displayed on page.Servlet works fine, I only need to know how to set image If response was without error.
<div id="q-app">
<input type="file" id="file"
ref="file" accept=".jpg, .jpeg, .png"
style="display:none"
@change="handleFileUpload()"/>
<div class="q-ma-md row justify-start">
<div class="col-auto">
<q-btn style="width:1000px;height:1000px;" @click="tclick">
<q-img height="100%" width="100%" :src="imageSrc">
</q-img>
</q-btn>
</div>
</div>
<div class="col-auto">
<q-btn class="q-ma-md" size="md" @click="submitFile()" color="primary" label="changeProfilePicture"></q-btn>
</div>
</div>
And javascript
I have methods that catch the selected image and send it to the servlet
<script>
new Vue({
el: '#q-app',
data () {
return {
file: '',
imageSrc:'${pageContext.request.contextPath}/images/profile.jpg',
}
},
methods:{
tclick(){
this.$refs.file.click()
},
handleFileUpload(){
this.file = this.$refs.file.files[0];
},
submitFile(){
let formData = new FormData();
formData.append('file', this.file);
axios.post( "${pageContext.request.contextPath}"+"/hello-servlet",
formData,
{
headers: {
'Content-Type': 'multipart/form-data'
}
}
).then(response => {
this.$q.notify({
type: 'positive',
message: response.data,
position:'center',
icon: 'check'
})
}).catch(error => {
console.log(error);
})
},
},
})
</script>
How can I set picked image to q-img tag?