Vue is returning [object Module] to img src

Question

I'm using VueJS in version 2.6.11 with vue-material 1.0.0-beta-11.

I've read through the internet about loading images into Vue through vue-loader etc. but none of that helped.

<md-card-media md-ratio="4:3">
      <img :src="getImgUrl(muscle.name)" alt="Skyscraper">
</md-card-media>

This is my HTML element which is supposed to render images.

The getImgUrl is defined in such a way:

methods: {
    getImgUrl: imgName => {
      let urlName = imgName.replace(/\s/g, '')
      return require(`@/assets/images/${urlName}.png`)
    }
}

The result of the code above:

<img src="data:image/png;base64,dmFyIHJlbmRlciwgc3RhdGljUmVuZGVyRm5zCnZhc...truncatedForReadibility" alt="Skyscraper" crossorigin="Anonymous">

vue.config.js

module.exports = {
    publicPath: '/siluets/',
    configureWebpack: {
        module: {
            rules: [
                {
                    test: /\.(png|jpe?g|gif)$/i,
                    loader: 'vue-loader',
                    options: {
                        esModule: false,

                    },
                },
            ],
        }

    }
}

The browser is not showing up any images. I can't figure it out by myself

I don't recommend using methods in template content; they get run every tick. Try using a computed property instead — Phil
– Phil, Commented Apr 21, 2020 at 22:41
Are you sure you're looking at the correct element? I ask as your source does not have that crossorigin attribute — Phil
– Phil, Commented Apr 21, 2020 at 22:44
Why are you using the vue-loader for images? Why did you add that rule at all? Webpack is configured to load images via the url-loader / file-loader by default — Phil
– Phil, Commented Apr 21, 2020 at 22:45

Andrei Sena · Accepted Answer · 2020-04-21 22:56:55Z

2

You should not use vue-loader for images. Use url-loader or file-loader as shown os docs:

https://vue-loader.vuejs.org/guide/asset-url.html#transform-rules

answered Apr 21, 2020 at 22:56

Andrei Sena

1776 bronze badges

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

Comments

Chuck Taylor · Accepted Answer · 2021-07-30 02:46:18Z

0

You can access the image url in the [object Module] using the dot notation to access the default property.

In your getImgUrl method you can do this by returning: require(`@/assets/images/${urlName}.png`).default

methods: {
    getImgUrl: imgName => {
      let urlName = imgName.replace(/\s/g, '')
      return require(`@/assets/images/${urlName}.png`).default
    }
}

answered Jul 30, 2021 at 2:46

Chuck Taylor

19814 bronze badges

Collectives™ on Stack Overflow

Vue is returning [object Module] to img src

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related