I am unable to display the image in vue component from the Storage directory of Laravel. Please help me to solve this issue:
images are stored in DB as public/avatar/TSD50oeYXnkrX1nQ38N9zljP1FRdP42yPhJOrEKg.png
if I remove public path and do this <img :src="'../storage/avatar/31deG4gnbO3EwO2s26lnUe0KzJjskFfm8lPIGFeM.jpeg'" width="100">
i can see image diplayed in vue component from storage/public/avatar folder
method to get details of single user
public function user($id){
return $user = User::find($id);
}
methods to save image
public function profilePic(Request $request){
$this->validate($request,[
'image'=>'required|mimes:jpeg,jpg,png'
]);
$image = $request->image->store('public/avatar');
$authUser = auth()->user()->id;
$user = User::where('id',$authUser)->update([
'profilePic'=> $image
]);
return redirect()->back();
}
vue:
<template>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">Profile Component</div>
{{user.profilePic}}
//how can i display image here
<div class="card-body">
<form @submit.prevent="updateProfilePic" method="post" enctype="multipart/form-data">
<input type="file" name="image" class="form-control"v-on:change="onImageChange">
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props:['userid'],
data(){
return{
image:'',
user:[]
}
},
mounted() {
this.getUser()
console.log('Component mounted.')
},
methods:{
onImageChange(e){
console.log(e)
this.image = e.target.files[0];
},
updateProfilePic(){
const config={
headers:{
"content-type":"multipart/form-data"
}
}
let formData = new FormData();
formData.append('image',this.image);
axios.post('/profile-pic',formData,config).then((response)=>{
this.image='';
this.getUser()
}).catch((error)=>{
console.log(error)
this.allerrors = error.response.data.errors
})
},
getUser(){
axios.get('/user/'+this.userid).then((response)=>{
this.user = response.data
}).catch((error)=>{
alert('some error')
})
},
}
}
</script>
