无法使用 Vuejs 添加用户照片

Question

我已经为我的项目构建了一个概要文件组件(laravel+vuejs(当我尝试在她的位置显示用户照片时，它没有显示我尝试了很多方法，但没有解决方案。当我检查数据库时，我发现了它但有一个问题我能找到…有什么帮助吗？？？这个代码属于我想如何播种用户照片：

<div class="row">
<div class="col-md-3"  v-for="user in users"  v-if=" user.id == key "  :key="user.id">

<!-- Profile Image -->
<div class="card card-primary card-outline"  >
<div class="card-body box-profile">
<div class="text-center">
<img class="profile-user-img img-fluid img-circle" :src="getProfilePhoto()" 
alt="User profile picture" >
</div>

这是主脚本：

<div class="form-group row">
<label for="photo" class="col-sm-3 col-form-label">Profile Picture</label>
<div class="col-sm-10">
<input type="file"  name="photo"  @change="updateProfile" class="form-input">
</div>
</div>
<div class="form-group row">
<div class="col-sm-10">
<button   @click.prevent="updateInfo"  type="submit" class="btn btn-danger">Submit</button>
</div>
</div>
</form></div>
</div>
<!-- /.tab-pane -->
</div>
<!-- /.tab-content -->
</div><!-- /.card-body -->
</div>
<!-- /.nav-tabs-custom -->
</div>
<!-- /.col -->
</div>
<!-- /.row -->
<!-- /.container-fluid -->
<!-- /.content -->
</div>
</div>
</div>
</div>

</template>
<script>
export default {
data(){
return{
form : new Form({
location:'',
eucation:'',
photo:'',
skills:'',
email:'',
password:''
}),
key : this.$route.params.id,
users:[],
roles:{},
role:{
id:'',
role:''
},
user:{
},
}
},
methods:{
afficherMembre(){
axios.get('/api/membre').then(({ data }) =>(this.users = data.data));
},
getProfilePhoto(){
let photo = (this.form.photo.length > 200) ? this.form.photo : "/img/profile/"+ 
this.form.photo ;
return photo;
},
updateInfo(){
this.form.put('/api/profile')
.then(()=>{
this.form.reset();                 })
.catch(() => {
});
},
updateProfile(e){
let file = e.target.files[0];
let reader = new FileReader();
let limit = 1024 * 1024 * 2;
if(file['size'] > limit){
swal({
type: 'error',
title: 'Oops...',
text: 'You are uploading a large file',
})
return false;
}
reader.onloadend = (file) => {
this.form.photo = reader.result;
}
reader.readAsDataURL(file);
},
afficherProjet(){
axios.get("/api/getProjectsUserConnecte").then(({ data }) => (this.projets = data));
},
},

created(){
this.afficherMembre();
},
mounted() {
console.log('Component mounted.')
}

}

Answer 1

用加载照片需要

<img class="profile-user-img img-fluid img-circle" :src="require(getProfilePhoto)"  alt="User profile picture" >

如果要使用根目录，请在路径中添加"@"。示例：'@/assets/images/Example.jpg'

这里有另一个话题：如何在Vue单文件组件中导入和使用图像？