Sha256: b20c6f71119f08bbd97a6341377b0344a98aac7290a9e213df13a3b97a4c1fbd
Contents?: true
Size: 1.28 KB
Versions: 22
Compression:
Stored size: 1.28 KB
Contents
# Images
1. leading slash necessary on the
a. Option name for the file-loader and url-loader (todo reference)
b. Option publicPath for the output (todo reference)
```
const assetLoaderRules = [
{
test: /\.(jpe?g|png|gif|ico|woff)$/,
use: {
loader: 'url-loader',
options: {
limit: urlFileSizeCutover,
// Leading slash is 100% needed
name: 'images/[hash].[ext]',
},
},
},
{
test: /\.(ttf|eot|svg)$/,
use: {
loader: 'file-loader',
options: {
// Leading slash is 100% needed
name: '/images/[hash].[ext]',
}
},
},
];
```
A full example can be found at [spec/dummy/client/app/components/ImageExample/ImageExample.jsx](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/client/app/components/ImageExample/ImageExample.jsx)
You are free to use images either in image tags or as background images in SCSS files. You can
use a "global" location of /client/app/assets/images or a relative path to your JS or SCSS file, as
is done with CSS modules.
**images** is a defined alias, so "images/foobar.jpg" would point to the file at
`/client/app/assets/images/foobar.jpg.`
```
resolve: {
alias: {
images: join(process.cwd(), 'app', 'assets', 'images'),
},
},
```
Version data entries
22 entries across 22 versions & 1 rubygems