CODEWITHSUNDEEP
javascriptvue.jsvuejs2vue-componentdynamic-image-generation
Askar
Askar

Reputation: 5854

How to dynamically display an image in VueJS?

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.

enter image description here

Upvotes: 1

Views: 14571

Answers (3)

Sodala
Sodala

Reputation: 290

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

Upvotes: 6

Qonvex620
Qonvex620

Reputation: 3972

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
          },
    }

};

Upvotes: 0

Tom Shaw
Tom Shaw

Reputation: 1712

Don't forget to add.

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

Upvotes: 0

Related Questions