javascript - Vue.js:在 laravel 公共(public)文件夹中显示个人资料图片

Question

我正在创建评论系统。 我将 vue.js 集成到了我的 laravel 项目中。

In my comment area, I want to show user profile image in my laravel public folder.

但我不知道如何显示图像。

我想要实现的是，

if user has a profile image, I want to show it in comment area. But if user doesn't have a profile image, I want to show an avatar.

我使用了vue头像组件，所以我想我想使用它。

我的个人资料图片存储在public/uploads/profile中。

comment.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);
    }

comment.php

protected $with = ['user'];

protected $appends = ['repliesCount'];

web.php

Route::get('results/{post}/comments', 'CommentController@index');

Answer 1

如果图像文件的数据库列名称是 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>

如果您为用户使用多个图像，则需要添加循环，如下所示:

<div class="user" v-if="comment.user.img.length > 0">
    <span v-for="(item, index) in comment.user.img">
         <img :src="'uploads/profile/'+item.your_image_name_column">
    </span>
</div>
<div class="user" else>
    <img :src="default_image_path_here">
</div>