javascript - Vue 正在将 [object Module] 返回到 img src
问题描述
我在 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,
},
},
],
}
}
}
浏览器不显示任何图像。我自己想不通
解决方案
你不应该对图像使用vue-loader。使用url-loader或file-loader如 os docs 所示:
https://vue-loader.vuejs.org/guide/asset-url.html#transform-rules
推荐阅读
- arrays - 没有空引用异常,无法获取空数组的长度
- python - 当我们在 python 中从列表转换为集合时会发生什么?
- python - Python:如何对未标记的图像进行分类并保存到类文件夹中?
- xcode - 我升级到“Xcode 11 Beta 3”,它只引入“Create ML”(版本 1),没有显示“活动”分类器模型?
- c++ - .erase() 和 .size() 在这段代码中做了什么?
- php - 使用 PHP 进行 MySQL 搜索
- fortran - 错误:Cygwin/gfortran 中的续行错误
- javascript - Webpack4 npm start Uncaught TypeError
- python - 如何遍历隐藏的 div 并抓取文本?
- c++ - 它是一个“x”,它漂浮在输出屏幕上并实时移动