如何在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

Answer 2

Might worked on yours. Make a watcher for that to update again the props value an rerender it in your component.

export default {
  props: ["image_url"],
  watch: {
          image_url(val){
              this.image_url = val
          },
    }

};

Answer 3

Don't forget to add.

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