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.

Thanks for your time. I have updated my post. The code structure can be seen here stackoverflow.com/q/59855921/1745902 — Askar
– Askar, Commented Jan 22, 2020 at 13:33
does this answer your question: stackoverflow.com/a/40493036/3462319 — depperm
– depperm, Commented Jan 22, 2020 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
– Askar, Commented Jan 22, 2020 at 13:45
also that post is from 2016. I believe this can be done in a better way these days... — Askar
– Askar, Commented Jan 22, 2020 at 13:48

Sodala · Accepted Answer · 2020-01-22 14:27:23Z

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

edited Jan 22, 2020 at 14:27

answered Jan 22, 2020 at 14:20

Sodala

2901 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Tom Shaw · Accepted Answer · 2020-01-22 13:56:26Z

0

Don't forget to add.

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

answered Jan 22, 2020 at 13:56

Tom Shaw

1,7322 gold badges16 silver badges25 bronze badges

5 Comments

Tom Shaw Over a year ago

As a side note image urls typically begin with a forward slash. /assets/images/apple.jpg

Askar Over a year ago

Thanks. Adding the snippet and slashes in the url didn't help

Tom Shaw Over a year ago

Double check the image exists in your assets/images folder.

Askar Over a year ago

Images are there. When I tried explicitly specify one url, it worked. So something wrong with how I'm trying to render

Tom Shaw Over a year ago

Inspect the element in dev tools. Is there a path to the image in the src.

Qonvex620 · Accepted Answer · 2020-01-22 13:56:28Z

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

};

edited Jan 22, 2020 at 13:56

answered Jan 22, 2020 at 13:49

Qonvex620

3,9801 gold badge12 silver badges17 bronze badges

1 Comment

Askar Over a year ago

Hi. Can you please add more explanation how to add it and where?

Collectives™ on Stack Overflow

How to dynamically display an image in VueJS?

3 Answers 3

Comments

5 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related