Skip to content

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

@roshinit-a

Description

@roshinit-a

Description

getImageUrl() in web-components/src/signals/app.ts produces URLs with double slashes when assetsImagesPath ends with a trailing /.

export const getImageUrl = (fileName: string) => {
  return `${assetsImagesPath.get()}/${fileName}`
  //           ^^ no trim here ^^  ^ always adds slash
}

Current Behaviour

assetsImagesPath.set("/assets/")
getImageUrl("logo.png") // Returns "/assets//logo.png" ❌

This is already acknowledged in web-components/src/signals/app.test.ts with the comment "// Double slash - might be a bug in implementation", but the test accepts the incorrect output rather than asserting the correct one.

Expected Behaviour

assetsImagesPath.set("/assets/")
getImageUrl("logo.png") // Should return "/assets/logo.png" ✅

assetsImagesPath.set("/assets")
getImageUrl("logo.png") // Should return "/assets/logo.png" ✅

Proposed Fix

Trim a trailing slash from the path before interpolation:

 export const getImageUrl = (fileName: string) => {
-  return `${assetsImagesPath.get()}/${fileName}`
+  return `${assetsImagesPath.get().replace(/\/+$/, "")}/${fileName}`
 }

And update the corresponding test to assert the correct (non-doubled) URL instead of the broken one.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions