moj-frontend icon indicating copy to clipboard operation
moj-frontend copied to clipboard

Images don't appear when using the Prototype Kit

Open gregtyler opened this issue 1 year ago • 0 comments

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

  1. Set up a prototype (npx govuk-prototype-kit@latest create)
  2. Install moj-frontend (npm install @ministryofjustice/frontend --save)
  3. Add a component that uses an image, such as "Filter a list"
  4. 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.

gregtyler avatar Jan 23 '24 10:01 gregtyler