<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 源要求语句失败而中断