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, Oct 10 '18 at 22:36

score 8 · Accepted Answer · answered Oct 10 '18 at 22:39

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 '18 at 22:39

Ohgodwhy

49,779
11
80
110

1

Apparently not possible to pass only a variable to `require`, so one of the solutions might be huge switch-case: https://github.com/facebook/react-native/issues/6391#issuecomment-194581270 Also `return require(path + '')` seems to be working. – Traxo Aug 26 '19 at 07:39
` ` this one also solved the problem – Mohamed Raza Aug 15 '20 at 13:08

score 0 · Answer 2 · answered Apr 27 '22 at 18:53

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.

Vuejs image src dynamic load doesn't work

2 Answers2

Linked

Related