Cannot load local images in CSS

[Noah-Silvera]

🐛 Bug Report

If you use the React/Webpack import css style where css files are imported into js files like import styles from "./index.module.css"; then background images loaded by URL's fail for local images such as png's, svgs, and jpgs.

Have you read the Contributing Guidelines on issues?

yes

To Reproduce

1. Load a css file via an import into a JS file (the styles.module.css file for the index.js landing page works nicely)
2. Use a background-image: url('<some-local-file>.png|jpg|svg') type tag on an imported class
3. Try to load docusaurus

Expected behavior

Docusaurus loads the png image and other common types (jpg, svg, etc) via the css

Actual Behavior

Docusaurus fails to load the background image with an error like so.

Your Environment

I've made no modifications to the webpack config that ships with docusaurus-init

• Docusaurus version used: 2.0.0-alpha.43
• Chrome 80.0.3987.132, Node.js 10.16.3):
• Desktop

Reproducible Demo

I've modified src/pages/index.js and src/pages/styles.module.css to load a background-image URL tag with a local png (static/img/docusaurus.png). Run yarn start to see the error.

https://github.com/Noah-Silvera/docusaurus-png-load-bug

[Noah-Silvera]

I think this just needs an update to the webpack loader to support some basic image types.

[lex111]

background-image: url('../../static/img/docusaurus.png')

Use absolute path like this background-image: url('/img/docusaurus.png') (same as static/img/docusaurus.png)

[apurvaojas]

background-image: url('../../static/img/docusaurus.png')

Use absolute path like this background-image: url('/img/docusaurus.png') (same as static/img/docusaurus.png)

@lex111
The absolute path will not work if we have a different baseURL in the production environment.
In that case, we need to use a relative path, which is breaking for SVG images.

• Docusaurus version used: 2.0.0-alpha.70

Reported an SVG specific issue #3964