<v-img> 不适用于静态图像。 [Vuetify] 图片加载失败 src：@/assets/img/logo.png答案

【问题标题】：<v-img> doesn`t work with static image. [Vuetify] Image load failed src: @/assets/img/logo.png<v-img> 不适用于静态图像。 [Vuetify] 图片加载失败 src：@/assets/img/logo.png
【发布时间】：2020-04-01 18:40:06
【问题描述】：

我有一个简单的 vuetify 图像标签，它必须从项目目录加载图像文件，但它永远不会工作

<v-img src="@/assets/img/logo.png"></v-img>

Vue 既不能使用相对路径加载图像，也不能使用绝对路径加载图像。带有@ 和 require() 的 src 也不起作用。当我尝试 require() 图像时，编译器失败并说

Module not found: Error: Can't resolve './assets/logo.png' in 'D:\Projects\ExpertRestRELEASE\src\main\resources\static\js\pages'

这似乎是一个 webpack 问题，但我不知道如何解决它

项目结构：

webpack.config.js

const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
    mode: 'development',
    devtool: 'source-map',
    entry: path.join(__dirname, 'src', 'main', 'resources', 'static', 'js', 'main.js'),
    devServer: {
        contentBase: './dist',
        disableHostCheck: true,
        compress: true,
        port: 8000,
        allowedHosts: [
            'localhost:9000'
        ],
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            },
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                test: /\.css$/,
                use: [
                    'vue-style-loader',
                    'css-loader'
                ]
            },
            {
                test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
                loader: 'file-loader'
            },
            {
                test: /\.(png|jpe?g|gif)$/i,
                use: [
                    {
                        loader: 'file-loader',
                    },
                ],
            }
        ]
    },
    plugins: [
        new VueLoaderPlugin()
    ],
    resolve: {
        modules: [
            path.join(__dirname, 'src', 'main', 'resources', 'static', 'js'),
            path.join(__dirname, 'node_modules'),
        ],
    }
}

P.S url 链接工作正常

【问题讨论】：

标签： vue.js webpack vuetify.js

【解决方案1】：

您正在尝试请求/assets，它在您的项目中不存在，您那里只有/assets.img，那么您为什么要请求/assets/img/logo.png 而不是/assets.img/logo.png？你为什么这样命名这个文件夹？您可能应该将其重命名为 assets。

另外，还有一件事，看看错误，它告诉你它在/src/main/resources/static/js/pages 内找不到文件夹/assets，因为你试图获得的/assets 在/resources 内是3 个级别，不在/pages

试试这个：

<v-img :src="logoPath"></v-img>

...
data() {
  return {
    logoPath: path.join(__dirname, 'src', 'main', 'resources', 'assets', 'logo.png')
  }
}

你也可以试试这些：

<v-img src="./src/main/resources/assets/logo.png"></v-img>
<v-img src="./resources/assets/logo.png"></v-img>
<v-img src="./assets/logo.png"></v-img>
<v-img :src="__dirname + '/src/main/resources/assets/logo.png'"></v-img>
<v-img :src="__dirname + 'src/main/resources/assets/logo.png'"></v-img>
<v-img :src="__static + '/assets/logo.png'"></v-img>
<v-img :src="__static + 'assets/logo.png'"></v-img>

【讨论】：