title: Vue.js: show profile image in laravel public folder
body: <p>I am creating commenting system.
  And I integrated vue.js in my laravel project.</p>
  
  <blockquote>
    <p>In my comment area, I want to show user profile image in my laravel
    public folder.</p>
  </blockquote>
  
  <p>But I have no idea how to show image.</p>
  
  <p>What I want to achieve is, </p>
  
  <blockquote>
    <p>if user has a profile image, I want to show it in comment area. But if
    user doesn't have a profile image, I want to show an avatar.</p>
  </blockquote>
  
  <p>I used vue avatar component so I think I want to use it.</p>
  
  <p>My profile images are stored in <strong>public/uploads/profile.</strong></p>
  
  <p><strong>comment.vue</strong></p>
  
  <pre><code>&lt;template&gt;
  &lt;div&gt;
      &lt;div class="reply-comment" &gt;
              &lt;div class="user-comment"&gt;
              &lt;div class="user"&gt;
                  &lt;!---&lt;img src="{{ $comment-&gt;user-&gt;img }}" class="image-preview__image"&gt;---&gt;
                  &lt;avatar :username="comment.user.name" :size="45"&gt;&lt;/avatar&gt;
              &lt;/div&gt;
              &lt;div class="user-name"&gt;
                  &lt;span class="comment-name"&gt;&lt;a :href=" '/user/' + 'profile' +'/'+ comment.user.id + '/'  "&gt;{{ comment.user.name }}&lt;/a&gt;&lt;/span&gt;
                  &lt;p&gt;{{ comment.body }}&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="reply"&gt;
          &lt;button @click="addingReply = !addingReply" class="reply-button" :class="{ 'red' : !addingReply, 'black' : addingReply }"&gt;
              {{ addingReply ? 'Cancel' : 'Add Reply'}}
          &lt;/button&gt;
      &lt;/div&gt;
      &lt;div class="user-reply-area" v-if="addingReply"&gt;
          &lt;div class="reply-comment"&gt;
              &lt;input v-model='body' type="text"&gt;
          &lt;/div&gt;
              &lt;button @click="addReply" class="comment-button"&gt;&lt;span&gt;Add Reply&lt;/span&gt;&lt;/button&gt;
      &lt;/div&gt;
       &lt;replies ref='replies' :comment="comment"&gt;&lt;/replies&gt;
  &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import Avatar from 'vue-avatar'
  import Replies from './replies.vue'
  export default {
      components: {
          Avatar,
          Replies
      },
      data() {
          return {
              body: '',
              addingReply: false
          }
      },
      props: {
          comment: {
              required: true,
              default: () =&gt; ({})
          },
          post: {
              required: true,
              default: () =&gt; ({})
          }
      },
      methods: {
          addReply() {
              if(! this.body) return
              axios.post(`/comments/${this.post.id}`, {
                  comment_id: this.comment.id,
                  body: this.body
              }).then(({data})=&gt; {
                  this.body = ''
                  this.addingReply = false
                  this.$refs.replies.addReply(data)
              })
              .catch(function (error) {
          console.log(error.response);
          });
       }
      }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>profile.php</strong></p>
  
  <pre><code>public function user(){
      return $this-&gt;belongsTo(User::class, 'user_id');
  }
  </code></pre>
  
  <p><strong>user.php</strong></p>
  
  <pre><code>public function profile(){
          return $this-&gt;hasOne(Profile::class);
      }
  
   public function comments()
      {
          return $this-&gt;hasMany(Comment::class);
      }
  </code></pre>
  
  <p><strong>comment.php</strong></p>
  
  <pre><code>protected $with = ['user'];
  
  protected $appends = ['repliesCount'];
  </code></pre>
  
  <p><strong>web.php</strong></p>
  
  <pre><code>Route::get('results/{post}/comments', 'CommentController@index');
  </code></pre>