如何unshift/push图像在vue中列出

Question

我有评论列表，我可以将用户的用户名、内容和日期附加到列表中，当我试图附加用户图像时它显示为空，我试图从互联网附加图像但它也显示为空

  <ul  v-for="comment  in comments"  :key="comment">
          <li class="comment-object">
            <div class="image-container">
              <img class="profile-pic" :src="'http://192.168.63.200:8000' + comment.author_image" v-on:change="currentUserImage" alt="profile picture"/>
            </div>
            <div class="comment-text">
              <h2 class="username" style="color: #C2C3C4">{{comment.author}} <span class="muted">&#183; {{comment.publish}}</span></h2>
              <p class="comment">{{comment.content}} </p>
              
            </div>
          </li>
        </ul>



await axios.post('/video/api/video/comments/create/', commentData)
      .then(response => {
         this.comments.unshift({ content: this.commentContent,  author:  this.$store.state.user.username, author_image: 'https://image.shutterstock.com/image-photo/surreal-image-african-elephant-wearing-260nw-1365289022.jpg', likes:0, publish:'now'})

})

Answer 1

问题出在<img class="profile-pic" :src="'http://192.168.63.200:8000' + comment.author_image" v-on:change="currentUserImage" alt="profile picture"/>

我刚刚删除了 url http://192.168.63.200:8000 并且有效

如何unshift/push图像在vue中列出

How to unshift/push image to list in vue

vue.js

vue-component

vuejs2