1

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

Askar
  • 5,784
  • 10
  • 53
  • 96
  • what does your file structure look like? – depperm Jan 22 '20 at 13:31
  • Thanks for your time. I have updated my post. The code structure can be seen here https://stackoverflow.com/q/59855921/1745902 – Askar Jan 22 '20 at 13:33
  • does this answer your question: https://stackoverflow.com/a/40493036/3462319 – depperm Jan 22 '20 at 13:40
  • It looks like it's showing how to render for multiple images, where in my case I'm dealing with one URL in the ItemImage component. Maybe I could use that answer as hint. I will try. I'm new to VueJS. – Askar Jan 22 '20 at 13:45
  • also that post is from 2016. I believe this can be done in a better way these days... – Askar Jan 22 '20 at 13:48

3 Answers3

6

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

Sodala
  • 300
  • 1
  • 7
0

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

};
Qonvex620
  • 3,819
  • 1
  • 8
  • 15
0

Don't forget to add.

<div v-if="image_url">
  <img v-bind:src="image_url" />
</div>
Tom Shaw
  • 1,642
  • 2
  • 16
  • 25