Image fallback

[Annevd]

Met een {#if}, alleen laten zien als persoon een geldige foto heeft. En met else een fallback

[amirnapoletano]

 <div class="picture-container">
                    {#if person.avatar}
                        <picture>
                            <source srcset="{person.avatar}?format=avif" type="image/avif" />
                            <source srcset="{person.avatar}?format=webp" type="image/webp" />
                            <img src="{person.avatar}" alt="{person.name}" on:error="{() => this.src='/path/to/fallback-avatar.svg'}" />
                        </picture>
                    {:else}
                        <!-- Fallback -->
                        <svg xmlns="http://www.w3.org/2000/svg" width="150" height="150" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <circle cx="12" cy="12" r="10" fill="#ffcc00"/>
                            <circle cx="9" cy="10" r="1" fill="black"/>
                            <circle cx="15" cy="10" r="1" fill="black"/>
                            <path d="M8 16c1.333-1 2.667-1 4 0s2.667 1 4 0" fill="none" stroke="black" />
                        </svg>
                    {/if}
                </div>