title: Unable to display image in vue component form storage of Laravel
body: <p>I am unable to display the image in vue component from the Storage directory of Laravel. Please help me to solve this issue:</p>
  
  <p>images are stored in DB as <code>public/avatar/TSD50oeYXnkrX1nQ38N9zljP1FRdP42yPhJOrEKg.png</code></p>
  
  <p>if I remove public path and do this <code>&lt;img :src="'../storage/avatar/31deG4gnbO3EwO2s26lnUe0KzJjskFfm8lPIGFeM.jpeg'" width="100"&gt;</code></p>
  
  <p>i can see image diplayed in vue component from storage/public/avatar folder</p>
  
  <p>method to get details of single user</p>
  
  <pre><code>public function user($id){
          return $user = User::find($id);
      }
  </code></pre>
  
  <p>methods to save image</p>
  
  <pre><code>public function profilePic(Request $request){
          $this-&gt;validate($request,[
              'image'=&gt;'required|mimes:jpeg,jpg,png'
          ]);
          $image = $request-&gt;image-&gt;store('public/avatar');
          $authUser = auth()-&gt;user()-&gt;id;
          $user = User::where('id',$authUser)-&gt;update([
              'profilePic'=&gt; $image
          ]);
          return redirect()-&gt;back();
      }
  </code></pre>
  
  <p>vue:</p>
  
  <pre><code>&lt;template&gt;
      &lt;div class="container"&gt;
          &lt;div class="row justify-content-center"&gt;
              &lt;div class="col-md-8"&gt;
                  &lt;div class="card"&gt;
                      &lt;div class="card-header"&gt;Profile Component&lt;/div&gt;
  
              {{user.profilePic}}
  //how can i display image here
  
  
  &lt;div class="card-body"&gt;
                          &lt;form @submit.prevent="updateProfilePic" method="post" enctype="multipart/form-data"&gt;
                              &lt;input type="file" name="image" class="form-control"v-on:change="onImageChange"&gt;
                              &lt;button type="submit" class="btn btn-primary"&gt;Submit&lt;/button&gt;
  
                          &lt;/form&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      export default {
          props:['userid'],
          data(){
              return{
                  image:'',
                  user:[]
  
              }
          },
          mounted() {
              this.getUser()
              console.log('Component mounted.')
          },
          methods:{
              onImageChange(e){
                  console.log(e)
                  this.image = e.target.files[0];
  
                  },
              updateProfilePic(){
                  const config={
                      headers:{
                          "content-type":"multipart/form-data"
                      }
                  }
                  let formData = new FormData();
                  formData.append('image',this.image);
  
                  axios.post('/profile-pic',formData,config).then((response)=&gt;{
                      this.image='';
                      this.getUser()
  
  
  
                  }).catch((error)=&gt;{
                      console.log(error)
                      this.allerrors = error.response.data.errors
                  })
              },
              getUser(){
                  axios.get('/user/'+this.userid).then((response)=&gt;{
                      this.user = response.data
                  }).catch((error)=&gt;{
                      alert('some error')
                  })
              },
          }
      }
  &lt;/script&gt;
  </code></pre>