diff --git a/src/elements/core/testing/assets/placeholder-image.png b/src/elements/core/testing/assets/placeholder-image.png new file mode 100644 index 0000000000..7e78734631 Binary files /dev/null and b/src/elements/core/testing/assets/placeholder-image.png differ diff --git a/src/elements/image/image.scss b/src/elements/image/image.scss index be8a323b09..859b7e0369 100644 --- a/src/elements/image/image.scss +++ b/src/elements/image/image.scss @@ -82,10 +82,10 @@ .sbb-image__img { position: absolute; inset: 0; - opacity: 0; + opacity: 0.000001; :host([data-loaded]) & { - opacity: 1; + opacity: 0.999999; } } diff --git a/src/elements/image/image.visual.spec.ts b/src/elements/image/image.visual.spec.ts index 3118d806bc..0b9bd48f24 100644 --- a/src/elements/image/image.visual.spec.ts +++ b/src/elements/image/image.visual.spec.ts @@ -6,7 +6,7 @@ import { waitForImageReady } from '../core/testing.js'; import './image.js'; -const imageUrl = import.meta.resolve('../core/testing/assets/lucerne.png'); +const imageUrl = import.meta.resolve('../core/testing/assets/placeholder-image.png'); const aspectRatios = [ '1-1', @@ -44,7 +44,7 @@ describe(`sbb-image`, () => { html``, ); diff --git a/src/elements/lead-container/lead-container.visual.spec.ts b/src/elements/lead-container/lead-container.visual.spec.ts index 2285b0ab7b..5da56ede1f 100644 --- a/src/elements/lead-container/lead-container.visual.spec.ts +++ b/src/elements/lead-container/lead-container.visual.spec.ts @@ -15,8 +15,10 @@ import '../link/block-link/block-link.js'; import '../title.js'; import './lead-container.js'; -const leadImageUrl = import.meta.resolve('../core/testing/assets/lucerne.png'); -const leadImageBase64 = await loadAssetAsBase64(leadImageUrl); +const leadImageUrl = import.meta.resolve('../core/testing/assets/placeholder-image.png'); +const leadImageBase64 = await loadAssetAsBase64( + import.meta.resolve('../core/testing/assets/lucerne.png'), +); describe(`sbb-lead-container`, () => { const wrapperStyles = { backgroundColor: `var(--sbb-color-milk)`, padding: '0' }; diff --git a/src/elements/message/message.visual.spec.ts b/src/elements/message/message.visual.spec.ts index f6c52e0c56..156b928829 100644 --- a/src/elements/message/message.visual.spec.ts +++ b/src/elements/message/message.visual.spec.ts @@ -7,7 +7,7 @@ import './message.js'; import '../image.js'; import '../button/secondary-button.js'; -const imageUrl = import.meta.resolve('../core/testing/assets/lucerne.png'); +const imageUrl = import.meta.resolve('../core/testing/assets/placeholder-image.png'); describe(`sbb-message`, () => { describeViewports({ viewports: ['zero', 'medium'] }, () => {