在刀片模板中如何在双花括号内插入变量答案

【问题标题】：In blade template how to insert variable inside double curly braces在刀片模板中如何在双花括号内插入变量
【发布时间】：2019-01-27 12:56:21
【问题描述】：

我是 laravel 新手，我不知道该怎么做。

我想插入这个@{{comment.user.avatar}}

在这个<img src={{ asset("images/profile/{comment.user.avatar}") }} />里面

我得到的是这个

<img src="http://localhost:89/images/profile/{comment.user.avatar}">

我想要的是

<img src="http://localhost:89/images/profile/avatarpicture.jpg">

这是我的完整代码

<div class="card" v-for="comment in comments">
                        <div class="card-content">
                            <div class="media">
                                <div class="media-left">
                                    <img src={{ asset("images/profile/") }}@{{comment.user.avatar}} style='height:50px; width:50px' /> 
                                </div>
                                <div class="media-content">   
                                    <p class="subtitle is-6">@{{comment.user.firstname}} said...</p>
                                    <p>
                                        @{{comment.body}}
                                    </p>
                                    <span style="color: #aaa;" class="is-size-7">on @{{comment.created_at}}</span>
                                </div>
                            </div>
                        </div>
                    </div>

这是我的javascript

@section('scripts')
    <script>
      const app = new Vue({
        el: '#app',
        data: {
          comments: {},
          commentBox: '',
          post: {!! $post->toJson() !!},
          user: {!! Auth::check() ? Auth::user()->toJson() : 'null' !!}
        },
        mounted(){
          this.getComments();
        //   this.listen();
        },
        methods:{
          getComments(){
            axios.get(`/api/posts/${this.post.id}/comments`)
              .then((response) => {
                this.comments = response.data
              })
              .catch(function(error){
                console.log(error);
              })
          },


        }
      });

    </script>

提前谢谢你

阿内尔

【问题讨论】：

什么是comment.user.avatar ??
{{asset("images/profile/") }}{{comment.user.avatar}} 使用这个添加一个并排确保放入 $需要像 {{ $comment.user.avatar }} 这样的案例
注释是对象还是路由名称？？
您尝试获取图像的方式是刀片中的 JavaScript (vue.js)，您应该像 {{$comment->user->avatar}} 一样获取它
注释部分使用 vue.js 在 v-for="comment in cmets" 中循环。如果我使用 $comment，它会像 @{{comment.body}} 一样显示每条记录->user->avatar 它给了我这个变量 $comment not found.

标签： php laravel laravel-blade

【解决方案1】：

Vue 插值不能在 HTML 属性中使用。您必须绑定一个表达式并将其括在引号中。注意:src 是v-bind:src 的简写。

<img :src="'{{ asset("images/profile/") }}' + comment.user.avatar">

通过这样做，您将绑定连接的字符串：

'http://localhost:89/images/profile/' + comment.user.avatar

【讨论】：