v-img: require('../img/book.png') 是一个模块，无法加载答案

【问题标题】：v-img: require('../img/book.png') is a module and can't be loadedv-img: require('../img/book.png') 是一个模块，无法加载
【发布时间】：2020-09-18 10:27:00
【问题描述】：

我在 SFC 中有以下一行：

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

我收到一个错误：

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

在 webpack.config.js 中：

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

我没有使用 Vue CLI。我自己管理 Webpack 配置。

【问题讨论】：

您是在使用带有 Vuetify CLI 插件的 Vue CLI 还是您自己管理 Webpack 配置？
如果你尝试在其中找到transformAssetUrls，它是否存在？
@MichalLevý 是的，它存在。

标签： vue.js webpack vuetify.js

【解决方案1】：

将 :src="require('../img/book.png')" 更改为 src="../img/book.png" 并将以下内容添加到 webpack.config.js：

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

【讨论】：