使用 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 (将#修改为@）