我有一个简单的vuetify图像标签,它必须从项目目录加载图像文件,但它从来没有工作
<v-img src="@/assets/img/logo.png"></v-img>
字符串
Vue不能加载图像,无论是相对路径,也不是绝对的。src与@和require()也不工作。当我尝试require()图像,编译器失败,并说
Module not found: Error: Can't resolve './assets/logo.png' in 'D:\Projects\ExpertRestRELEASE\src\main\resources\static\js\pages'
型
这似乎是一个webpack问题,但我不知道如何解决它。
项目结构:
x1c 0d1x的数据
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链接工作正常
3条答案
按热度按时间6bc51xsx1#
你试图请求的
/assets
在你的项目中不存在,你只有/assets.img
,那么为什么你请求/assets/img/logo.png
而不是/assets.img/logo.png
?为什么你要这样命名这个文件夹?你可能应该把它重命名为assets
。此外,还有另一件事,看看错误,它告诉你,它找不到文件夹
/assets
内/src/main/resources/static/js/pages
,因为你试图得到的/assets
是3级,在/resources
,而不是在/pages
试试这个:
字符串
你也可以试试这些:
型
o75abkj42#
试试这个:
字符串
4nkexdtk3#
还有一个办法
字符串