<v-img> doesn`t work with static image. [Vuetify] Image load failed src: @/assets/img/logo.png

Question

I have simple vuetify image tag which has to load image file from project directory, but it never works

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

Vue cannot load image neither with relative path, nor with absolute. src with @ and require() also don`t work. When i try to require() image, compiler fails and says

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

It seems like a webpack problem, but i don`t have any idea how to solve it

Project structure:

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 links work fine

Answer 1

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

另外，还有一件事，看看错误，它告诉你找不到/assets里面的文件夹/src/main/resources/static/js/pages，因为/assets你试图获取的是 3 级以上的文件夹，在 里面/resources，而不是在里面/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>