[Vuetify] Image load failed

Hi, I’m using a Vue Cli 3 template with Vuetify, and Vuetify loader, but when trying to use a progressive image i get the following error:

<VImg src="@/assets/img/home/mac-left.jpg" /> gives this error. I know the location is correct, because if i change to <img src="@/assets/img/home/mac-left.jpg" /> the image works properly, so it has something to do with the loader.

Here’s the vue.config.js, which should resolve to the correct webpack config.

const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin');
const { VuetifyProgressiveModule } = require('vuetify-loader');

module.exports = {
  chainWebpack:  config => {
    config.resolve.alias
      .set('vuetify/lib', 'vuetify/es5/components');
    config.plugin('vuetify-loader')
      .use(VuetifyLoaderPlugin);
    config.module
      .rule('vue')
      .use('vue-loader')
      .loader('vue-loader')
      .tap(options => {
        options.compilerOptions.modules = [VuetifyProgressiveModule];
        return options;
      });
    config.module
      .rule('images')
         .oneOf('progressiveImages')
              .test(/\.(png|jpe?g|gif)$/)
              .resourceQuery(/vuetify-preload/)
              .use('vuetify-loader/progressive-loader')
                  .loader('url-loader')
                  .options({ limit: 8000 })
                  .end()
              .end()
          .oneOf('progressiveImagesOther')
              .use('url-loader')
                  .loader('url-loader')
                  .options({ limit: 8000 })
                  .end()
              .end();
  },
};

I’ve installed both ImageMagick and GraphicsMagick, both of them return same issue. Loader seems to be returning a base64 string, but it must be parsed incorrectly, since, strings that are returned can’t be parsed to the image.

Is there something I’m missing? Could it be caused by Vue Cli 3 maybe?

[as4101741]

try to use <v-img :src="require(‘@/assets/img/home/mac-left.jpg’) ></v-img>

[nadilas]

@as4101741 great 😉 that does it