【发布时间】：2020-08-07 13:53:57
【问题描述】：
我无法在 Laravel 的 Storage 目录中的 vue 组件中显示图像。请帮我解决这个问题：
图像在数据库中存储为public/avatar/TSD50oeYXnkrX1nQ38N9zljP1FRdP42yPhJOrEKg.png
如果我删除公共路径并执行此操作<img :src="'../storage/avatar/31deG4gnbO3EwO2s26lnUe0KzJjskFfm8lPIGFeM.jpeg'" width="100">
我可以从 storage/public/avatar 文件夹中看到 vue 组件中显示的图像
获取单个用户详细信息的方法
public function user($id){
return $user = User::find($id);
}
图片保存方法
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>
【问题讨论】：