title: How do you display an image from an axios call into a Vuejs img element? I've seen nothing that works
body: <p>I've seen quite a few ways of doing this. I wanted originally to store the image and call it from my database to the view, but I'm not sure where I should store it and the correct way to call it (<code>:src="prizes.image_url"</code>)??</p>
  
  <p>The image is stored client-side</p>
  
  <pre><code>{
      id: 2,
      name: "Merano MC400 Cello",
      description: "Established in 2000, Merano have made it their mission to create affordable, beautifully crafted instruments. They offer brass, wind and stringed instruments all at reasonable prices. They have a large team of artisans who look over every instrument to ensure it maintains high standards. Many of their instruments are aimed at the beginner market but they also offer some fine examples of professional equipment as well.",
      image_url: "../assets/images/c5Cor.png",
      quantity: 3
  }
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>getPrizes() {
    axios.get('http://localhost:3000/prizes').then(response =&gt; {
      this.prizes = response.data
      console.log(response.data)
    })
  }
  </code></pre>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div v-for="prize in prizes" :key="prize.id"&gt;
     &lt;div class="card_individual"&gt;
        &lt;div class="card-media-container"&gt;
           &lt;img class="card_image" :src="prize.image_url" alt="instruments"/&gt;
        &lt;/div&gt;
        &lt;div class="card-detail-container"&gt;
           &lt;div class="card_title"&gt;Win a {{ prize.name }}&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="modal-footer"&gt;
           &lt;router-link :to="{ name: 'PriceDetail', params: { prizeId: prize.id }}"&gt;&lt;button type="button" class="btn btn-primary"&gt;{{ cards.btn_text }}&lt;/button&gt;&lt;/router-link&gt;
        &lt;/div&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>