How can I reference images online in Vue js?

Question

I have something like this:

<img class="product_image" src="{{ product.Image_url }}">

product.Image_url is referenced to my database that has an image URL like https://hackernoon.com/hn-images/1*YNBTPaCNBNWLoT7XAbJ1Lw.png. This piece of code is giving me a Failed to load resource: the server responded with a status of 404 (Not Found) error. I am not sure what I am doing wrong here.

Would appreciate help in this regard.

Thanks!

Answer 1

If the image https://something.com/something.png is really present (paste the url to browsers address bar to be sure you can load the asset) then try this:

<img class="product_image" :src="product.Image_url">

Answer 2

If you try to use the markup you currently have, vue will log a warning into the JS console explaining what's wrong and how to fix it:

new Vue({
  el: '#app',
  data: {
    product: { Image_url: 'https://via.placeholder.com/120.png?text=Product+image' }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <img class="product_image" src="{{ product.Image_url }}">
</div>

Specifically, running the snippet above will produce the following warning:

src="{{ product.Image_url }}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of <div id="{{ val }}">, use <div :id="val">.

To fix it, just do what it says, i.e. replace src="{{ product.Image_url }}" with :src="product.Image_url":

new Vue({
  el: '#app',
  data: {
    product: { Image_url: 'https://via.placeholder.com/120.png?text=Product+image' }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <img class="product_image" :src="product.Image_url">
</div>