Как я могу поместить изображение для конкретного пользователя в шаблон vuejs?

Question

Я на самом деле работаю над аватаркой для пользователей.Теперь я хочу поместить эту фотографию рядом с их именем в моем чате, который работает с pusher и vuejs.Мой img выглядит следующим образом:

<img class="profil_pic" src="{{url('uploads/logo_'.Auth::user()->firstName."_".Auth::user()->lastName.".png")}}" onerror="this.src='images/user.jpg'" alt="">

Я не могу просто вставить его в файл, он не работает и будет для каждого пользователя, но я хочу, чтобы он был для пользователя auth.Я немного новичок в vue.js, любая помощь будет благодарна.

Это мой chatMessage.vue:

<template>
    <ul class="chat messages" >
        <li class="clearfix list-group-item" v-for="message in messages" v-bind:class="{
            classForUser: (message.user.id === currentuserid),
            classForNotUser: (message.user.id !== currentuserid)}" >
            <div class="chat-body clearfix" >
                <div class="header">
                    <strong class="primary-font"
                            v-bind:class="{
                                classForAuthorSameAsUser: (message.user.id === currentuserid),
                                classForAuthorDiffThanUser: (message.user.id !== currentuserid)
                            }">
                        {{ message.user.firstName }}
                        {{ message.user.lastName}}
                        :
                    </strong>
                    {{ message.human_readable_time}}
                </div>
                <p>{{ message.message }}</p>
            </div>
        </li>
    </ul>
</template>

<script>
    export default {
        props: ['messages','currentuserid']
    };

</script>

<style scoped>
    .classForAuthorSameAsUser {
        color: lightseagreen ;
    }
    .classForAuthorDiffThanUser {
        color: black;
    }
    .classForUser{
        width: 70%;
        left: 30%;
    }
    .classForNotUser{
        width: 70%;
    }
</style>

И это HTML-код моего чата:

<div class="row">
    <div class="col-md-12 col-md-offset-2">
        <div class="col-md-12 col-md-offset-2">
            <div class="panel-body panel-content" id="mess_cont" :userid="{{Auth::user()->id}}">
                <chat-messages id="mess" :messages="messages" :currentuserid="{{Auth::user()->id}}"></chat-messages>
            </div>
            <div class="panel-footer">A
                <chat-form
                    v-on:messagesent="addMessage"
                    :user="{{ Auth::user() }}">
                </chat-form>
             </div>
         </div>
     </div>
 </div>

Я думаю, что мне нужно снова использовать то, что помогает мне получить идентификатор пользователя, но я не знаю, как это работает с vue.js.Спасибо за ваше время

И теперь у меня есть это:

<template>
    <ul class="chat messages" >
        <li class="clearfix list-group-item" v-for="message in messages" v-bind:class="{

                    classForUser: (message.user.id === currentuserid),
                    classForNotUser: (message.user.id !== currentuserid)}" >

            <div class="chat-body clearfix" >
                <div class="header">
                    <strong class="primary-font"
                            v-bind:class="{
                                classForAuthorSameAsUser: (message.user.id === currentuserid),
                                classForAuthorDiffThanUser: (message.user.id !== currentuserid)
                            }">
                        <img class="profil_pic" :src="`path/to/uploads/logo_${user.firstName}_${user.lastName}.png`" alt="Auth image"/>

                        {{ message.user.firstName }}
                        {{ message.user.lastName}}
                        :
                    </strong>
                    {{ message.human_readable_time}}
                </div>
                <p>

                    {{ message.message }}
                </p>
            </div>
        </li>
    </ul>

</template>

<script>

    export default {
        props: ['messages','currentuserid'],
        data() {
            return {
                user: null,
            }
        },
        methods: {
            this:$http.get('/api/get-auth')
                .then((response) => {
                    this.user = response.data.auth
                })
                .catch((error) => {
                    // handle error
                }),
        }

    };




</script>

<style scoped>
    .classForAuthorSameAsUser {
        color: lightseagreen ;
    }
    .classForAuthorDiffThanUser {
        color: black;
    }
    .classForUser{
        width: 70%;
        left: 30%;
    }
    .classForNotUser{
        width: 70%;
    }
</style>

И это не работает

Answer 1

Как я вижу, вы хотите получить тег img (с логикой лезвия):

<img class="profil_pic" src="{{url('uploads/logo_'.Auth::user()->firstName."_".Auth::user()->lastName.".png")}}" onerror="this.src='images/user.jpg'" alt="">

и поместить его в компонент chatMessage.vue.Если это так, вы можете сделать это следующим образом:

1. Создать функцию внутри контроллера для возврата аутентифицированной информации о пользователе:

public function getAuth()
{
    return response()->json([
        'auth' => auth()->user(),
    ], 200);
}

2. Создайте новый маршрут, чтобы получить эту информацию в вашем api.php файле:

Route::get('/get-auth', 'YourController@getAuth');

3. Создать новый параметр внутри данных ()возвращаемый объект в компоненте chatMessage.vue:

data() {
    return {
        user: null,        
    }
},

4. Создайте метод внутри компонента chatMessage.vue с необходимым кодом для извлечения этих данных:

fetchAuth() {
    this.$http.get('/api/get-auth')
        .then((response) => {
            this.user = response.data.auth
        })
        .catch((error) => {
            // handle error
        });
}

5. Вызовите этот метод внутри вашего created() метода жизненного цикла:

created() {
    this.fetchAuth();
}

6. Создайте тег img следующим образом:

<img class="profil_pic" :src="`path/to/uploads/logo_${user.firstName}_${user.lastName}.png`" alt="Auth image"/>