Package Exports

react-url-loader
react-url-loader/src/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-url-loader) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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:

npm 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:

index.html
images
  1.png
  2.png
styles
  1.css
  2.css
script
  1.js
  2.js

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

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

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

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

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:

<div>
  ...some html...
  <img src="image/2.png">
  ...some html...
</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:

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

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

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:

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

{
  test: /\.(png|jpe?g|gif|svg)(\?\S*)?$/,
  use: [{
    loader: 'url-loader',
    options: {
      limit: 2048,
      outputPath: '',
      outputStylePath: '../',
      fallback: 'vue-asset-loader',
      name: 'images/[name].[ext]?[hash]'
    }
  ]
}

License

MIT