Skip to content

fix(getImageUrl): strip trailing slash from assetsImagesPath to prevent double slashes#474

Open
roshinit-a wants to merge 2 commits intoopenfoodfacts:mainfrom
roshinit-a:fix/issue-473-getimageurl-double-slash
Open

fix(getImageUrl): strip trailing slash from assetsImagesPath to prevent double slashes#474
roshinit-a wants to merge 2 commits intoopenfoodfacts:mainfrom
roshinit-a:fix/issue-473-getimageurl-double-slash

Conversation

@roshinit-a
Copy link
Copy Markdown

Description

getImageUrl() in web-components/src/signals/app.ts produces URLs with double slashes when assetsImagesPath ends with a trailing / (e.g. set by an integrating app via assetsImagesPath.set("/assets/")).

// Before fix:
assetsImagesPath.set("/assets/")
getImageUrl("logo.png") // → "/assets//logo.png" ❌

// After fix:
getImageUrl("logo.png") // → "/assets/logo.png" ✅

The bug was already acknowledged in app.test.ts with the comment "// Double slash - might be a bug in implementation", but the test was accepting the broken output.

Fix in app.ts:

-  return `${assetsImagesPath.get()}/${fileName}`
+  return `${assetsImagesPath.get().replace(/\/+$/, "")}/${fileName}`

Fix in app.test.ts:

  • Replaced the broken test (which expected /assets//image.png) with a proper regression test that asserts /assets/image.png
  • Added a test for multiple trailing slashes (/assets///)
  • Added a test for CDN URLs with trailing slashes

Screenshot or video

No visual changes — logic fix.

Related issue(s) and discussion


Checklist: Author Self-Review

  • I have performed a self-review of my own code (including running it).
  • I understand the changes I'm proposing and why they are needed.
  • My changes generate no new warnings or errors (linting, console).
  • I have made corresponding changes to the documentation (if applicable).

Large Language Models usage disclosure

  • Generic LLM v0.0.0

…nt double slashes

Fixes openfoodfacts#473

getImageUrl() used a simple template literal that always added a '/'
separator. If assetsImagesPath ended with '/', the result was a URL
with double slashes (e.g. /assets//logo.png).

Fix: apply .replace(/\/+$/, '') on the path before interpolation so
one or more trailing slashes are stripped, regardless of how many
were set.

Also update app.test.ts:
- Replace the old test that accepted the broken "/assets//image.png"
  output (which had a TODO comment acknowledging the bug) with a
  proper regression test that asserts the correct "/assets/image.png"
- Add a test for multiple trailing slashes
- Add a test for CDN URLs with trailing slashes
@vercel
Copy link
Copy Markdown

vercel Bot commented Mar 23, 2026

@roshinit-a is attempting to deploy a commit to the openfoodfacts Team on Vercel.

A member of the Team first needs to authorize it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Bug: getImageUrl() produces double slashes when assetsImagesPath has a trailing slash

1 participant