v-img: require('../img/book.png') is a module and can't be loaded

Admin 1
Viewed 278

I have a following line in a SFC:

<v-img :src="require('../img/book.png')"></v-img>

I get an error:

[Vue warn]: Invalid prop: type check failed for prop "src". Expected String, Object, got Module

In webpack.config.js:

{
    test: /\.(png|jpe?g|gif)$/i,
    use: [
      {
        loader: 'file-loader',
      },
    ],
},
{
  test: /\.vue$/,
  loader: 'vue-loader',
  options: {
    transformAssetUrls: {
      'v-img': 'src',
    }
  }
},

I'm not using Vue CLI. I'm managing Webpack config myself.

vuetify.js vue.js webpack
1 Answers

Change :src="require('../img/book.png')" to src="../img/book.png" and add the following to webpack.config.js:

const CopyPlugin = require('copy-webpack-plugin');
plugins: [
  new CopyPlugin({
      patterns: [
        { from: 'src/img', to: 'img' },
      ],
  }),
]
Admin1
Related