user762579
user762579

Reputation:

Vue-cli 3 - Webpack 4: cannot load images with .webp format using the image-webpack-loader

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

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

I added the 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
                }
              }
            }
          ]
        }
      ]
    }
  }
}

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

what's wrong with my webpack settings ?

Upvotes: 1

Views: 3530

Answers (1)

user762579
user762579

Reputation:

change test .. to

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

and here we rae

Upvotes: 2

Related Questions