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

Posted

技术标签:

【中文标题】<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 【发布时间】: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 链接工作正常

【问题讨论】:

【参考方案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>

【讨论】:

以上是关于<v-img> 不适用于静态图像。 [Vuetify] 图片加载失败 src:@/assets/img/logo.png的主要内容,如果未能解决你的问题,请参考以下文章

Vuetify 应用程序因 v-img 源要求语句失败而中断

Css 静态引用不适用于 Django 模板

垂直对齐中间与显示表格单元格不适用于图像

在这种情况下不能使用 v-img 吗?

svg图像不适用于safari 5.1.7(windows)

引导图像轮播不适用于角度