CSS background image fails to load because of backslash

[Legends]

node 9.5
file-loader ^1.1.9

With the following approach I have a problem with background images in css files.
The last slash is a backslash!

{ // SO
test: /\.(png|ico|svg|jpg|gif)$/,
exclude: /node_modules/,
use: {              
	loader: 'file-loader',
	options: {
	name: function (fullPath) {
		console.log(path.relative(__dirname + '/src', fullPath)); // --> images\blue.jpg                      
		return path.relative(__dirname + '/src', fullPath);
	}
	}
}
}

Folder path src\images\

The blue.jpg is requested in my css file:

.hello {
    background: url('../images/blue.jpg');
}

[michael-ciniawsky]

Use path.relative => path.posix.relative to normalize the path, I also recommend to use options.outputPath {Function} and/or options.useRelativePath for this instead

[Legends]

The problem is I want to resemble the folder structure in src to dist, that's why i use the above approach.
With options.outputPath {Function} I only get the file name.

Your approach: options.outputPath {Function} and options.useRelativePath
In src I have images/icons, with your approach I get images and icons in the root of dist.

I fixed the above issue by using a regex to replace the slashes.

[alexander-akait]

@Legends Can you create minimum reproducible test repo?

[Legends]

Here it is: repo
Just execute npm run dev, then in the output folder under wwwroot/dist you will find the generated index.html file.

[ldwonday]

I met the same problem!
This is my config:

const relativeFileLoader = (ext = '[ext]') => ({
	loader: 'file-loader',
	options: {
		useRelativePath: true,
		name: `[name].${ext}`,
		context: resolve('src')
	}
});

this will output "..\..\".

[alexander-akait]

@ldwonday why you use useRelativePath option?

[ldwonday]

@evilebottnawi I am so sorry, maybe this porblem is other package's bug, and it was fixed!

[Nickman87]

Same issue here.

The following config:

{
	test: /\.(svg|png|jpg|gif)$/,
	use: [{
		loader: "file-loader",
		options: {
			name: "[path][name].[ext]",
			outputPath: "images",
			context: "node_modules"
		}
	}]
}

provides me with paths like: images\some\path\file.svg

Changing this to the following:

{
	test: /\.(svg|png|jpg|gif)$/,
	use: [{
		loader: "file-loader",
		options: {
			name: "[path][name].[ext]",
			outputPath: function (fullPath) {
				return `images/${fullPath}`;
			},
			context: "node_modules"
		}
	}]
}

provides me with paths like: images/some/path/file.svg as expected.

The lines that cause this difference seem to be these:

  if (options.outputPath) {
    if (typeof options.outputPath === 'function') {
      outputPath = options.outputPath(url);
    } else {
      outputPath = path.posix.join(options.outputPath, url);
    }
  }

Maybe this issue is related to this one: nodejs/node#13887 ?

[alexander-akait]

@Nickman87 can you create minimum reproducible test repo to ensure bug related to above issue, also please provide windows os version

[alexander-akait]

@Nickman87 friendly ping. Problem still exists? If yes can you create minimum reproducible test repo?

[Nickman87]

I have not yet found the time to make a small test repo. I will try to get it done in the coming days!

[alexander-akait]

@Nickman87 friendly ping

[Nickman87]

@evilebottnawi I'm sorry, I completely forgot.
I just made a basic setup, which corresponds to my other setup and it is working as expected, no issues 😮

I'll have to cross reference more stuff to see what is going wrong to get a sample project that actually fails...

[alexander-akait]

/cc @Nickman87 can we close problem?