Getting "[object Object]" in background image url

Hi all,

I created new phoenix project, and then added vuejs to it. Vue library loads successfully. But when I set background-image: url('../static/images/test.svg') in my app.css, I didn’t see background image in the result.

I inspected the output html in my browser and it seems that, the file-loader or css-loader sets invalid path in generated css. The background-image value is url([object Object]).

Here is my webpack.config.js file:

const path = require('path');
const glob = require('glob');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = (env, options) => ({
	optimization: {
		minimizer: [
			new TerserPlugin({ cache: true, parallel: true, sourceMap: false }),
			new OptimizeCSSAssetsPlugin({})
	entry: {
		'./js/app.js': glob.sync('./vendor/**/*.js').concat(['./js/app.js'])
	output: {
		filename: 'app.js',
		path: path.resolve(__dirname, '../priv/static/js')
	module: {
		rules: [
				test: /\.js$/,
				exclude: /node_modules/,
				use: {
					loader: 'babel-loader'
				test: /\.vue$/,
				loader: 'vue-loader'
				test: /\.css$/,
				use: [MiniCssExtractPlugin.loader, 'css-loader']
				test: /\.(png|svg|jpg|jpeg|gif|woff|woff2|ttf|eot)$/,
				loader: 'url-loader'
	plugins: [
		new MiniCssExtractPlugin({ filename: '../css/app.css' }),
		new CopyWebpackPlugin([{ from: 'static/', to: '../' }]),
		new VueLoaderPlugin()

Hello and welcome,

I guess You are using wrong path… Try with this one




Anyway using static in the path will not work, as it is the root of static assets.

Thanks for your reply, I test many path combination but the problem doesn’t fix.

Finally I install latest version of css-loader and url-loader and problem resolved.