Question

我有一个简单的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'),
        ],
    }
}

PS URL链接可以正常工作

Answer 1

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

还有另一件事，查看错误，它告诉您无法在assets内找到文件夹/assets，因为您要获取的/src/main/resources/static/js/pages处于3级以上，在/assets内，而不在/resources内

尝试一下：

/pages

您也可以尝试以下操作：

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

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

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

1 个答案: