Question

我是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>

先谢谢您

arnel

Answer 1

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

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

这样做，您将绑定串联的字符串：

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

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

1 个答案: