2

I have a project where Webpack 4.43.0 is set up with vue-cli. I'm trying to use image-size-loader to get image size at build time.

For that, in one of my .vue files I'm trying to load the module using the custom loader I have installed in the project:

const background = require("image-size!../../../../assets/images/candy.jpg");

When my project builds, it outputs the following error:

 ERROR  Failed to compile with 1 errors8:47:03 AM

This dependency was not found:

* image-size!../../../../assets/images/candy.jpg in ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./src/vue/guides/tags/hero/TagGroupInvite.vue?vue&type=script&lang=js&

To install it, you can run: npm install --save image-size!../../../../assets/images/candy.jpg

The file is present and js/ts/css files resolve fine. What can be wrong with my setup?

gvlasov
  • 18,638
  • 21
  • 74
  • 110

1 Answers1

1

I think you have to specify image-size as a loader too.

Append this loader to webpack.base.conf.js

...
loaders: [
    ...
    {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'image-size'
    }
    ...
]
...
tom
  • 9,550
  • 6
  • 30
  • 49
  • I specify the loader in `require()`, what's wrong with that? And I don't want every image file to be handled by this loader, only this specific image. – gvlasov Sep 03 '20 at 09:55