Sha256: 4c7a5f7237655ca2a704566c9b7690ba670bee9926fc43f9955f1b877da79017
Contents?: true
Size: 1.23 KB
Versions: 56
Compression:
Stored size: 1.23 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.js](../../spec/dummy/client/app/components/ImageExample/ImageExample.js)
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
56 entries across 56 versions & 1 rubygems