Vue 正在将 [object Module] 返回到 img src答案

【问题标题】：Vue is returning [object Module] to img srcVue 正在将 [object Module] 返回到 img src
【发布时间】：2020-08-04 20:05:11
【问题描述】：

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

                    },
                },
            ],
        }

    }
}

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

【问题讨论】：

请提供您的webpack.config.js 或vue.config.js
我不建议在模板内容中使用方法；他们每刻都跑。尝试改用计算属性
@Ashish 编辑后提供
您确定您查看的是正确的元素吗？我问你的来源没有crossorigin 属性
为什么要使用 vue-loader 来处理图片？你为什么要添加这条规则？ Webpack 默认配置为通过url-loader / file-loader 加载图片

标签： javascript vue.js

【解决方案1】：

您不应将 vue-loader 用于图像。使用 url-loader 或 file-loader 如 os docs 所示：

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

【讨论】：

【解决方案2】：

您可以使用点符号访问 [object Module] 中的图像 url，以访问 default 属性。

在您的 getImgUrl 方法中，您可以通过返回：require(`@/assets/images/${urlName}.png`).default

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

【讨论】：