vue.js - 不适用于静态图像。[Vuetify] 图片加载失败 src: @/assets/img/logo.png

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 链接工作正常

标签： vue.jswebpackvuetify.js

Answer 1

您正在尝试请求/assets项目中不存在的内容，而您只有/assets.img其中，那么您为什么要请求/assets/img/logo.png而不是/assets.img/logo.png？你为什么这样命名这个文件夹？您可能应该将其重命名为 just 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>