moj-frontend
moj-frontend copied to clipboard
Images don't appear when using the Prototype Kit
Description
When using moj-frontend with the GOV.UK Prototype Kit, remote images are not correctly loaded (on Filter a liist, Timeline, and Button menu). This is because the generated path (/assets/images/...) is not served by the Prototype Kit. Instead, the correct path is $govuk-extensions-url-context + "/%40ministryofjustice%2Ffrontend/moj/assets/" (NB: symbols in NPM package name must be URL-encoded).
Steps to Reproduce
- Set up a prototype (
npx govuk-prototype-kit@latest create) - Install moj-frontend (
npm install @ministryofjustice/frontend --save) - Add a component that uses an image, such as "Filter a list"
- Run the prototype (
npm run dev)
Expected behaviour: Images should be loaded from remote paths
Actual behaviour: The image requests 404 and aren't loaded
Reproduces how often: 100%
Versions
Prototype Kit: 13.16.0 moj-frontend: 2.0.0
Additional Information
This could be fixed by updating the Sass to:
$moj-assets-path: if(
$govuk-prototype-kit-major-version > 12,
$govuk-extensions-url-context + "/%40ministryofjustice%2Ffrontend/moj/assets/",
"/assets/"
) !default;
But doing so in the distributed file might have unintended side effects, so it would be preferable to provide a separate entrypoint for prototypes.