fix(sbb-image): render URL correctly with SSR (#2712)

Closes #2690 --------- Co-authored-by: Jeri Peier <[email protected]>
sbb-design-systems · Jun 5, 2024 · fde1700 · fde1700
1 parent f3e88e6
commit fde1700
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 10 deletions.
diff --git a/src/elements/image/image.ssr.spec.ts b/src/elements/image/image.ssr.spec.ts
@@ -1,4 +1,4 @@
-import { assert } from '@open-wc/testing';
+import { assert, expect } from '@open-wc/testing';
 import { html } from 'lit';
 
 import { fixture } from '../core/testing/private.js';
@@ -7,15 +7,30 @@ import { SbbImageElement } from './image.js';
 
 describe(`sbb-image ${fixture.name}`, () => {
   let root: SbbImageElement;
+  const url = import.meta.resolve('../clock/assets/sbb_clock_face.svg');
 
-  beforeEach(async () => {
-    const url = `${location.protocol}//${location.host}/src/elements/clock/assets/sbb_clock_face.svg`;
+  it('renders', async () => {
     root = await fixture(html`<sbb-image image-src=${url}></sbb-image>`, {
       modules: ['./image.js'],
     });
-  });
-
-  it('renders', () => {
     assert.instanceOf(root, SbbImageElement);
   });
+
+  const urls = [
+    { name: 'fully qualified url', url },
+    { name: 'local url', url: 'src/elements/clock/assets/sbb_clock_face.svg' },
+    { name: 'local root url', url: '/src/elements/clock/assets/sbb_clock_face.svg' },
+  ];
+  for (const { name, url } of urls) {
+    it(`should work with ${name}`, async () => {
+      root = await fixture(html`<sbb-image image-src=${url}></sbb-image>`, {
+        modules: ['./image.js'],
+      });
+      const sources = Array.from(root.shadowRoot!.querySelectorAll('source'));
+      expect(sources.length).greaterThan(0);
+      for (const source of sources) {
+        expect(source.srcset.startsWith(url)).to.be.true;
+      }
+    });
+  }
 });
diff --git a/src/elements/image/image.ts b/src/elements/image/image.ts
@@ -18,7 +18,6 @@ import {
 import {
   type CSSResultGroup,
   html,
-  isServer,
   LitElement,
   nothing,
   type PropertyValues,
@@ -406,11 +405,14 @@ export class SbbImageElement extends LitElement {
   }
 
   private _prepareImageUrl(baseUrl: string | undefined, lquip = false): string {
-    if (!baseUrl || baseUrl === '' || isServer) {
+    if (!baseUrl || baseUrl === '') {
       return '';
     }
 
-    const imageUrlObj = new URL(baseUrl);
+    // Creating an URL without a schema will fail, but is a valid input for baseUrl.
+    // e.g. image-src can be https://example.com/my-image.png or /my-image.png
+    const isFullyQualifiedUrl = !!baseUrl.match(/^\w+:\/\//);
+    const imageUrlObj = isFullyQualifiedUrl ? new URL(baseUrl) : new URL(`http://noop/${baseUrl}`);
 
     if (lquip) {
       // blur and size: ?blur=100&w=100&h=56
@@ -437,7 +439,11 @@ export class SbbImageElement extends LitElement {
       imageUrlObj.searchParams.append('fp-debug', 'true');
     }
 
-    return imageUrlObj.href;
+    // In case of "noop" host, we don't return the host and must remove the
+    // starting `/` of the pathname.
+    return isFullyQualifiedUrl
+      ? imageUrlObj.href
+      : imageUrlObj.pathname.substring(1) + imageUrlObj.search;
   }
 
   private _preparePictureSizeConfigs(): InterfaceImageAttributesSizesConfigBreakpoint[] {