Sha256: ffd263378a45b4364fe7c79b377fb191b2d070386c2eff2f779b442727bedc93
Contents?: true
Size: 1.24 KB
Versions: 17
Compression:
Stored size: 1.24 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](../../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
17 entries across 17 versions & 1 rubygems