[英]Vue.js: show profile image in laravel public folder
我正在創建評論系統。 我在我的 laravel 項目中集成了 vue.js。
在我的評論區,我想在我的 laravel 公用文件夾中顯示用戶個人資料圖像。
但我不知道如何顯示圖像。
我想要達到的是,
如果用戶有個人資料圖片,我想在評論區顯示它。 但是如果用戶沒有個人資料圖片,我想顯示一個頭像。
我使用了 vue 頭像組件,所以我想我想使用它。
我的個人資料圖片存儲在public/uploads/profile 中。
評論.vue
<template>
<div>
<div class="reply-comment" >
<div class="user-comment">
<div class="user">
<!---<img src="{{ $comment->user->img }}" class="image-preview__image">--->
<avatar :username="comment.user.name" :size="45"></avatar>
</div>
<div class="user-name">
<span class="comment-name"><a :href=" '/user/' + 'profile' +'/'+ comment.user.id + '/' ">{{ comment.user.name }}</a></span>
<p>{{ comment.body }}</p>
</div>
</div>
</div>
<div class="reply">
<button @click="addingReply = !addingReply" class="reply-button" :class="{ 'red' : !addingReply, 'black' : addingReply }">
{{ addingReply ? 'Cancel' : 'Add Reply'}}
</button>
</div>
<div class="user-reply-area" v-if="addingReply">
<div class="reply-comment">
<input v-model='body' type="text">
</div>
<button @click="addReply" class="comment-button"><span>Add Reply</span></button>
</div>
<replies ref='replies' :comment="comment"></replies>
</div>
</template>
<script>
import Avatar from 'vue-avatar'
import Replies from './replies.vue'
export default {
components: {
Avatar,
Replies
},
data() {
return {
body: '',
addingReply: false
}
},
props: {
comment: {
required: true,
default: () => ({})
},
post: {
required: true,
default: () => ({})
}
},
methods: {
addReply() {
if(! this.body) return
axios.post(`/comments/${this.post.id}`, {
comment_id: this.comment.id,
body: this.body
}).then(({data})=> {
this.body = ''
this.addingReply = false
this.$refs.replies.addReply(data)
})
.catch(function (error) {
console.log(error.response);
});
}
}
}
</script>
profile.php
public function user(){
return $this->belongsTo(User::class, 'user_id');
}
user.php
public function profile(){
return $this->hasOne(Profile::class);
}
public function comments()
{
return $this->hasMany(Comment::class);
}
評論.php
protected $with = ['user'];
protected $appends = ['repliesCount'];
web.php
Route::get('results/{post}/comments', 'CommentController@index');
如果圖像文件的數據庫列名稱是img
,那么您可以像下面這樣:
<div class="user" v-if="comment.user.img">
<img :src="'uploads/profile/'+comment.user.img">
</div>
<div class="user" else>
<img :src="default_image_path_here">
</div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.