模块解析失败：带有 vuetify 加载程序的图像中出现意外字符“�”

Question

我花了几个小时试图在我的 vuetify 网站上加载静态图像。我在 v-toolbar 中有以下代码：

<template class="d-flex align-center">
            <v-img
                :alt="appName"
                class="shrink mr-2"
                contain
                :src="require('./../static/images/logo64.jpg')"
                transition="scale-transition"
                width="40"
            />
</template>

它不想加载它。我的 package.json 文件中的 devDependencies 中有 sass、sass-loader、style-loader 和 vuetify-loader，除此之外，我的所有代码都可以与 vuetify、vue 和 vuex 一起正常工作那。

这是完整的错误：

我是不是忘记做某事了？

Answer 1

你试过完全不同的jpg吗？此外，检查文件扩展名是否为小写，始终使用 .jpg 而不是 .JPG

编辑： 如果可以的话，请 post 完整的错误信息...

edit2: 错误很明显，您没有加载程序来处理图像文件。
首先尝试 安装 file-loader，如果不能解决问题，请检查您的 webpack.config，可能缺少以下部分（或不包括 jpg）：

{
  test: /\.(png|jpg|gif|svg)$/,
  loader: 'file-loader',
  options: {
  name: '[name].[ext]?[hash]'
}

模块解析失败：带有 vuetify 加载程序的图像中出现意外字符“�”

Module parse failed: Unexpected character '�' in an image with vuetify loader

node.js

vuetify.js

vuex