title: Vue.js: Return image with method after axios.get
body: <pre><code>&lt;li v-for="people in projectData.employees" :key="people._id"&gt;
      &lt;b-img :src="colleagueImages(people)" 
  &lt;/li&gt;
  </code></pre>
  
  <pre><code>async colleagueImages(people) {
    console.log(people); // =&gt; max@stackoverflow.com
    let profileImage = await axios.get("http://myapilink.com/image?id=" + people + "&amp;s=200&amp;def=avatar", {
      headers: {
        'accept': 'image/jpeg'
      }
    });
    console.log(profileImage);
    return 'data:image/jpeg;base64,' + btoa(
      new Uint8Array(profileImage.data)
      .reduce((data, byte) =&gt; data + String.fromCharCode(byte), '')
    );
  }
  </code></pre>
  
  <p>The console.log(profileImage) returns the following:</p>
  
  <p><a href="https://i.stack.imgur.com/Frswz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Frswz.png" alt="Chrome console.log"></a>
  The API I am using is returning a Base64 Image.</p>
  
  <p>With my current code I only get the following error in my browser console:</p>
  
  <blockquote>
    <p>[Vue warn]: Invalid prop: type check failed for prop "src". Expected String, got Promise.</p>
  </blockquote>