Question

我正在尝试在扩展名为.webp

的Vue组件中加载图像

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

我添加了image-webpack-loader module

 yarn add image-webpack-loader --dev

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
                }
              }
            }
          ]
        }
      ]
    }
  }
}

但是在编译过程中资产优化出现错误

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设置有什么问题？

Answer 1

将测试..更改为

测试：/。（gif | png | jpe？g | webp | svg）$ / i，

我们在这里

Vue-CLI 3-Webpack 4：无法使用image-webpack-loader加载.webp格式的图像

1 个答案: