Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Images don't appear when using the Prototype Kit #562

Open
gregtyler opened this issue Jan 23, 2024 · 0 comments
Open

Images don't appear when using the Prototype Kit #562

gregtyler opened this issue Jan 23, 2024 · 0 comments
Labels
bug Something isn't working

Comments

@gregtyler
Copy link
Contributor

gregtyler commented Jan 23, 2024

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 gregtyler added the bug Something isn't working label Jan 23, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

1 participant