如何解决使用 vue-cli 导入图片
我想在我的 vue 组件中使用 .webp 图像。我已经用 vue-cli 搭建了这个项目。我遵循了每个帖子的所有说明 here
模板:
<img :src="imagesrc" alt="Picture of Henry VII" class="masonry-content" />
数据对象:
data() {
return {
imagesrc: require("@/assets/img/Henry_VII.webp")
};
},
vue.config.js:
module.exports = {
lintOnSave: false,configureWebpack: {
module: {
rules: [
{
test: /\.(gif|png|jpe?g|webp|svg)$/i,use: [
"file-loader",{
loader: "image-webpack-loader",options: {
webp: {
quality: 80
}
}
}
]
}
]
}
}
};
但没有图像。我得到的只是 Alt 值。控制台中没有错误。有人可以给我检查一下我遗漏了什么吗?我什至用相同的结果替换了一个简单的 .jpeg。谢谢...
更新: 发现一个直
<img
src="../assets/img/Henry_VII.webp"
alt="Picture of Henry VII"
class="masonry-content"
/>
并删除 vue.config.js 中的 configureWebpack 条目解决了显示图像的问题。我在测试中放入的任何文件类型都不会无错误地呈现。有没有其他人在让这个加载器在 vue 中工作时遇到问题?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。