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>

我认为我必须再次使用可帮助我获取用户ID的东西，但我真的不知道它如何与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（）返回的对象内创建一个新参数：

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"/>

如何在vuejs模板中为特定用户放置图片？

1 个答案: