How to dynamically display an image in VueJS?

Question

Please see here the relations between components How to pass value from one child component to another in VueJS?

The snippet bellow not giving an error and not displaying the image

<img v-bind:src="image_url" /> 

Code:

<template>
  <div>
    <img v-bind:src="image_url" />
  </div>
</template>

<script>
export default {
  props: ["image_url"]
};
</script>

image_url comes from another component and in VueJS developer's tool I was able to confirm the value is an url. Looks like something wrong with the way how I'm trying to render a dynamic image.

Answer 1

You have to expose your images to your web server. Hopefully Vue-cli does that for you. You have to move your assets folder from src to the public folder.

More info on https://cli.vuejs.org/guide/html-and-static-assets.html#static-assets-handling