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().