javascript - Vue 正在将 [object Module] 返回到 img src

Question

我在 2.6.11 版本中使用 VueJS 和 vue-material 1.0.0-beta-11。

我已经通过互联网阅读了有关通过 vue-loader 等将图像加载到 Vue 中的信息，但这些都没有帮助。

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

这是我应该呈现图像的 HTML 元素。

getImgUrl 是这样定义的:

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

上面代码的结果:

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

                    },
                },
            ],
        }

    }
}

浏览器不显示任何图像。我自己想不通

Answer 1

你不应该使用 vue-loader 对于图像。使用网址加载器 或 文件加载器 如图所示操作系统文档:

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