react-url-loader

This is a file-loader wrapper for React and Webpack, solve the image relative path issues when HTML and CSS are not in the same directory.

install

To begin, you'll need to install react-url-loader:

1npm install react-url-loader --save-dev

react-url-loader works like file-loader, but solve a file-loader`s relative path issue when image, css and html in diffrence directorys.

purpose

if your output directory structure is like this:

1index.html
2images
3  1.png
4  2.png
5styles
6  1.css
7  2.css
8script
9  1.js
10  2.js

1.css load 1.png, the url in style file may be write like this:

1  ...some css...
2  .some-selector {
3    background: url(images/1.png);
4  }
5  ...some css...

to support that output directory structure, your webpack config maybe like this:

1{
2  test: /\.(png|jpe?g|gif|svg)(\?\S*)?$/,
3  use: [{ loader: 'file-loader', options: { publicPath: '../', name: 'images/[name].[ext]?[hash]' }]
4}

then webpack will translate images/1.png to ../images/1.png, this does solve the issues, but wait, if your react component render function has img tag that:

1<div>
2  ...some html...
3  <img src="image/2.png">
4  ...some html...
5</div>

webpack will also translate images/2.png to ../images/2.png, it leads html load 2.png failure, so file-loader can't tell the picture from HTML or CSS. react-url-loader just solving this issues! your webpack config can be like this:

1{
2  test: /\.(png|jpe?g|gif|svg)(\?\S*)?$/,
3  use: [{ loader: 'react-url-loader', options: { publicPath: '', publicStylePath: '../', name: 'images/[name].[ext]?[hash]' }]
4}

or

1{
2  test: /\.(png|jpe?g|gif|svg)(\?\S*)?$/,
3  use: [{
4    loader: 'url-loader',
5    options: {
6      limit: 2048,
7      publicPath: '',
8      publicStylePath: '../',
9      fallback: 'react-url-loader',
10      name: 'images/[name].[ext]?[hash]'
11    }
12  ]
13}

react-url-loader will choose publicPath or publicStylePath based on the image from react component render function or style file.

you can also use outputPath or outputStylePath:

1{
2  test: /\.(png|jpe?g|gif|svg)(\?\S*)?$/,
3  use: [
4    { 
5      loader: 'react-url-loader', 
6      options: { 
7        outputPath: '', 
8        outputStylePath: '../', 
9        name: 'images/[name].[ext]?[hash]' 
10      }
11  ]
12}

or

1{
2  test: /\.(png|jpe?g|gif|svg)(\?\S*)?$/,
3  use: [{
4    loader: 'url-loader',
5    options: {
6      limit: 2048,
7      outputPath: '',
8      outputStylePath: '../',
9      fallback: 'vue-asset-loader',
10      name: 'images/[name].[ext]?[hash]'
11    }
12  ]
13}

License

MIT