title: How can I display image from Laravel Storage to vue front-end
body: <p>I am saving an image in Laravel Storage persiting the path ant the database like this:</p>
  
  <pre><code>if($request-&gt;hasFile('avatar')) 
        {
          $avatar = $request-&gt;file('avatar');
          $path = $avatar-&gt;store('images/profile');
  
           $thumbnailName = "avatar".Date('YMdhis');
          $avatar-&gt;move(public_path('images/profile'), $thumbnailName);
  
        }
        //Save path to the database
        $avatar_path = new UserProfile;
        $avatar_path-&gt;avatar = $path;
        $avatar_path-&gt;save();
  
    The challenge  I am having is displaying the image in VueJs front. Here is my vue template:
  
  
  
  &lt;img :src="profile.avatar" alt="Profile Photo Image" width="200" height="200" class="img-thumbnail"/&gt;
  
  //This obviously does not work because profile.avatar contains relative 
  path of the image as saved in the database
    **JavaScript**
  &lt;script&gt;
        export default
  {
      name:'ListProfile',
      data(){
          return{
  
            profile:{} //storing image path as fetched from database
  
          }
      },
      }
        &lt;/script&gt;
  </code></pre>
  
  <p>I have also symlinked from 'public/storage' to 'storage/app  using artisan command storage:link</p>
  
  <p>This is my base url in main.js :</p>
  
  <pre><code> axios.defaults.baseURL = 'http://127.0.0.1:8000/api/'
  </code></pre>
  
  <p>Any help? Thanks in advance.</p>