'Vuejs image src dynamic load doesn't work

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?

vue.jsvue-cli-3


Solution 1:[1]

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

Solution 2:[2]

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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Ohgodwhy
Solution 2 Michel Fernandes

Related Questions