Vuejs image src dynamic load doesn't work

Question

I just started using Vue.js and Vue CLI and i'm facing an issue, i don't understand why i can't set the image dynamically from the scope but i can do it writing it directly in the HTML, obj.img is a string with @/assets/logo.png value too. I have a timeout faking an ajax call, but the browser does not resolve properly the routes for the image.

<div slot="media">
        <img :src="obj.img"> <!-- http://localhost:8080/@/assets/logo.png -->
        <img src="@/assets/logo.png"> <!-- http://localhost:8080/img/logo.82b9c7a5.png -->
</div>

Also, why are the routes different? Any ideas?

Because the packer is not using require under the hood on a computed property. Check the first answer under the first related question on the right ----> — Ohgodwhy
– Ohgodwhy, Commented Oct 10, 2018 at 22:36
` <v-img :src="require(@/assets/ + items.image)" height="200px"></v-img>` this one also solved the problem — raza9798
– raza9798, Commented Aug 15, 2020 at 13:08

Ohgodwhy · Accepted Answer · 2018-10-10 22:39:21Z

8

So the real fix would be this:

:src="getImage(obj.img)"

getImage(path) {
  return require(path)
}

You can read more about it in this response from Evan, the creator of Vue

answered Oct 10, 2018 at 22:39

Ohgodwhy

50.9k11 gold badges86 silver badges114 bronze badges

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

2 Comments

Traxo Over a year ago

Apparently not possible to pass only a variable to require, so one of the solutions might be huge switch-case: github.com/facebook/react-native/issues/… Also return require(path + '') seems to be working.

raza9798 Over a year ago

` <v-img :src="require(@/assets/ + items.image)" height="200px"></v-img>` this one also solved the problem

Michel Fernandes · Accepted Answer · 2022-04-27 18:53:07Z

0

Good!

Like @Ohgodwhy showed, Vue don't get the image path directly.

That's the way to get set an image src:

<v-img max-height="150" max-width="250" :src="getImage()"></v-img>

and then, in methods, you need a:

methods: {
    getImage() {
      return require("./logo.png");
    },
  },

And it's done! I'm a beginner and I got a lot to do with it.

answered Apr 27, 2022 at 18:53

Michel Fernandes

1,27511 silver badges8 bronze badges

Collectives™ on Stack Overflow

Vuejs image src dynamic load doesn't work

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related