Vue-cli 3 - Webpack 4:无法使用 image-webpack-loader 加载 .webp 格式的图像 [英] Vue-cli 3 - Webpack 4: cannot load images with .webp format using the image-webpack-loader

问题描述

我正在尝试在扩展名为 .webp 的 Vue 组件中加载图像

I am trying to load images in Vue components with the extension .webp

<v-parallax :src="require('@/assets/images/hero.webp')">

我添加了 image-webpack-loader 模块

 yarn add image-webpack-loader --dev

vue.config.js

vue.config.js

    const webpack = require('webpack')

module.exports = {
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.(gif|png|jpe?g|svg)$/i,
          use: [
             'file-loader',
            {
              loader: 'image-webpack-loader',
              options: {
                webp: {
                  quality: 80
                }
              }
            }
          ]
        }
      ]
    }
  }
}

但是我在编译过程中遇到资源优化错误

but I get an error in asset optimization during compilation

94% asset optimization

 ERROR  Failed to compile with 1 errors                                                                                                       18:57:32

 error  in ./src/assets/images/hero.webp

Module parse failed: Unexpected character '�' (1:4)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)

 @ ./node_modules/vue-loader/lib/template-compiler?{"id":"data-v-16f8e3e2","hasScoped":true,"optionsId":"0","buble":{"transforms":{}}}!./node_modules/
vue-loader/lib/selector.js?type=template&index=0!./src/components/Home/Heading.vue 11:24-60
 @ ./src/components/Home/Heading.vue
 @ ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"/Users/yves/Developments/myprojects/node_modules/.cac
he/cache-loader"}!./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/views/Home.vue
 @ ./src/views/Home.vue
 @ ./src/router.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client/index.js (webpack)/hot/dev-server.js ./src/main.js

我的 webpack 设置有什么问题?

what's wrong with my webpack settings ?

推荐答案

将 test .. 更改为

change test .. to

测试:/.(gif|png|jpe?g|webp|svg)$/i,

test: /.(gif|png|jpe?g|webp|svg)$/i,

我们在这里

这篇关于Vue-cli 3 - Webpack 4:无法使用 image-webpack-loader 加载 .webp 格式的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！