Breadcrumb
Assets
Overview
Assets can be stored in src/assets
and they will be shipped with the Web Module in the assets
subfolder.
Because Web Modules can be loaded from different locations and it is not possible to set one hard-coded URL for them.
Context
Correct URL inside the Web Module can be obtained using Context
available in the Web Module src/code
folder.
Let’s start by importing Context under the assumption that we are in the src/code
folder:
import {context} from './Context';
Then we can obtain assets URL using Context:
const moduleBaseUrl = context.getModule().getManifest().url;
const assetsBaseUrl = `${moduleBaseUrl}/assets`;
const exampleImgUrl = `${assetsBaseUrl}/assets/images/img.png`;
Images
src
attribute of <img>
HTML tag can be set without using Context
object. Path to the image file should be prefixed with the Web Module name:
<!-- Prefixed with "modules" followed by Web Module name -->
<img src="modules/com-example-web-module/assets/images/img.png" />
<!-- Shorter form containing only Web Module name -->
<img src="com-example-web-module/assets/images/img.png" />
CSS Variables
CSS variables that look similar to URLs created in the previous paragraph can be used in Less:
/* Prefixed */
.prefixed {
background: var(--modules\/com-example-web-module\/assets\/images\/img\.png);
}
/* Shorter form */
.shorter {
background: var(--com-example-web-module\/assets\/images\/img\.png);
}
Special characters like slashes or dots have to be escaped with \
.
There is no url()
as it is already contained in the CSS variable var()
.