Не загружаются картинки [object Module] Vue ssr webpack
Делаю сайт использую vue ssr. Стартовый шаблон.
В режиме разработки( и соответственно в проде) картинки не грузятся. Через инспектор видно следующие:
<img src="[object Module]"/>
Картинки храню в каталоге - src/assets.
В компоненты импортирую так:
<img src="../assets/logo.svg"/>
Пробовал некоторые варианты ответов, которые нашёл здесь. Ни одни, не помог.
Прикрепляю файл конфгурации для webpack webpack.base.config
const path = require('path')
const webpack = require('webpack')
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
const { VueLoaderPlugin } = require('vue-loader')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const isProd = process.env.NODE_ENV === 'production'
const postcssConfig = {
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: (loader) => [
require('postcss-flexbugs-fixes'),
require('autoprefixer')({
flexbox: 'no-2009'
})
]
}
}
module.exports = {
mode: isProd ? 'production' : 'development',
devtool: isProd
? false
: '#cheap-module-source-map',
output: {
path: path.resolve(__dirname, '../dist'),
publicPath: '/dist/',
filename: isProd ? '[name].[chunkhash].js' : '[name].js'
},
resolve: {
alias: {
src: path.resolve(__dirname, '../src'),
public: path.resolve(__dirname, '../public')
}
},
module: {
noParse: /es6-promise\.js$/, // avoid webpack shimming process
rules: [
{
test: /\.(svg|eot|woff|ttf|svg|woff2)$/,
use: [
{
loader: 'file-loader',
options: {
name: '[path][name].[ext]'
}
}
]
},
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
compilerOptions: {
preserveWhitespace: false
}
}
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'url-loader',
options: {
limit: 10000,
name: '[name].[ext]?[hash]'
}
},
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader',
postcssConfig
]
},
{
test: /\.s[ac]ss$/i,
use: [
// fallback to style-loader in development
isProd
? MiniCssExtractPlugin.loader
: 'vue-style-loader',
{
loader: 'css-loader',
options: {
sourceMap: true
}
},
{
loader: 'sass-loader',
options: {
sourceMap: true
}
},
postcssConfig
]
}
]
},
performance: {
hints: false
},
plugins: isProd
? [
new VueLoaderPlugin(),
new webpack.optimize.ModuleConcatenationPlugin(),
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: '[name].[hash].[contenthash].css'
})
]
: [
new VueLoaderPlugin(),
new FriendlyErrorsPlugin()
]
}