How to show specific image from the database when doing a edit function in a vue component? - laravel

Question

I'm making a SPA using laravel and vue. I dont know how to show the specific image of the news when Im making a update/edit function. In laravel I know how to do it by using a #foreach and asset something like that. But in the vue component I'm having a hard time figuring it out. I'm using the vform package btw so that my form is filled automatically with the data which I want to edit but the my problem is how to show the image like i filled the text field by using fill function from the vform package. What do I need to do in order to fix my problem?
News.vue
<!-- show/edit modal extra large -->
<div class="modal fade" id="editNews" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4> <strong>Edit</strong> </h4>
</div>
<div class="modal-body">
<!-- Vform -->
<form #submit.prevent="updateNews()">
<div class="form-group">
<label>News Title</label>
<input
v-model="form.title"
type="text" name="title"
placeholder="Title"
class="form-control" :class="{ 'is-invalid': form.errors.has('title') }">
<has-error :form="form" field="title"></has-error>
</div>
<div class="form-group">
<label>Subtitle</label>
<input
v-model="form.subtitle"
type="text"
name="subtitle"
placeholder="Subtitle"
class="form-control" :class="{ 'is-invalid': form.errors.has('subtitle') }">
<has-error :form="form" field="subtitle"></has-error>
</div>
<div class="form-group">
<label>News Content</label>
<textarea
v-model="form.body"
type="text"
name="body"
placeholder="News Content"
class="form-control" :class="{ 'is-invalid': form.errors.has('body') }">
</textarea>
<has-error :form="form" field="body"></has-error>
</div>
<div class="form-group">
<label>Picture</label>
<input type="file" id="image" #change="addImage"
class="form-control" :class="{ 'is-invalid': form.errors.has('image') }">
<has-error :form="form" field="image"></has-error>
</div>
<div>
<h4>Currently Displayed News Image</h4>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-success">Submit Changes</button>
</div>
</form>
<!-- vform -->
</div>
</div>
</div>
</div>
<!-- modal edit/show -->
The script below the News.vue
<script>
export default {
data(){
return{
editmode:false,
news: {},
form: new Form({
id:"",
title: "",
subtitle:"",
body:"",
image:"",
postedby:""
})
}
},
methods: {
loadNews(){
axios.get('api/news')
.then(({data}) => (this.news = data))
},
createNews(){
// console.log('hello')
this.$Progress.start()
this.form.post("api/news")
.then(()=>{
$("#addNews").modal("hide")
$(".modal-backdrop").remove()
swal.fire("Created!", "", "success")
Fire.$emit("UpdateTable");
})
this.$Progress.finish()
},
addImage(e){
// console.log(e.target.files[0])
var fileReader = new FileReader()
fileReader.readAsDataURL(e.target.files[0])
fileReader.onload = (e) => {
this.form.image = e.target.result
}
// console.log(this.form)
},
editForm(newsdata){
//shows the modal for edit and fills the data in it.
this.editmode = true
this.form.reset()
$('#editNews').modal('show')
this.form.fill(newsdata)
},
updateNews(){
//update the news based on the modal inputs (not working need few codes in controller #update method)
this.form.put('api/news/' + this.form.id)
.then(()=>{
$('#editNews').modal('hide')
$(".modal-backdrop").remove()
swal.fire("Updated!", "", "success")
Fire.$emit('UpdateTable')
this.$Progress.finish()
})
},
},
created() {
console.log('Component mounted.')
this.loadNews();
Fire.$on("UpdateTable",()=>{
this.loadNews();
})
}
}
</script>

Answer 1

Add this for img:
<img src="" id="imagepreview">
Then you can simply do:
$('#imagepreview').attr('src', "IMAGEDIRECTORYHERE" + newsdata.image);