General
Importing images into HTML
import myImage from 'path-to-image/special.png';
<img src={myImage}/>
myImage
can be used as a AssetsPath for images
Importing assets to SCSS/CSS
background: url("path-to-image/scssImage.png")
Webpack will automatically replace the paths to correct paths using the AssetsPath
Paths for components
Default paths when using Dev server
The default AssetsPath for the dev server is /assets/
and cannot(and shouldn't) be changed.
Default paths for Production
The default AssetsPath for production is /assets/
, this can be further configured
Changing the paths for production
A common use case is to extern multiple components in a bundler - you can then build
the code with a specific AssetsPath. - Please see the section below regarding changing the path
Paths for application
Defaults - Dev server
The default AssetsPath for an application is /
and cannot(and shouldn't) be changed.
Changing the paths for production
Appendix
Changing AssetsPath for production only
As specified above, it's possible to alter the AssetsPath for production
Edit (./jarb.config.json)
{
env: {
production: {
assetsPath:'https://example.com'
}
}
}
Image/Assets output target
When assets are imported into your code they will be exported for production usage
The full path of the asset will be used, so for example inside /dist/
you will find directories matching the local path.
/dist/node_modules/SOME_NODE_MODULE/assets/icon.png
While the above path may look strange, it merely means that we're including an image
from a node module, so the full path is exported.