I got started with Svelte(Kit) and I really like it so far. However, I ran into an issue that I couldn't resolve.

I'm trying to dynamically display images and like to have a fall back image in case the normal one does not exist.

With vanilla HTML/JS, I would use this Source:

<img src="imagefound.gif" onerror="this.onerror=null;this.src='imagenotfound.gif';" />

I tried to make it happen in my Svelte project, but it either does not work (e.g. A) or it works sometimes (for a brief moment or until I refresh (e.g. B)).

This is my code (A):

<script>
let profileImg = person.profile;
const missingProfile = () => {
    console.log('image does not exist');
    profileImg = '../default.png';
};
</script>

...

<img
    src={profileImg}
    on:error={missingProfile}
    alt={person.name}
/>

or just the hardcoded version (B)

<img 
    src="imagefound.gif" 
    onerror="console.log('image not found');this.onerror=null;this.src='./person.png';" 
/>

There is this question, but I believe the answer is what I am doing. Is there a difference whether I use SvelteKit vs. Svelte?

Addition

It looks like that Svelte does not even set the src for the <img />, if the original variable with the url for the image is undefined (in my example person.profile). The accepted answer wouldn't work in that case.

I edited this line to prevent that case:

let profileImg = person.profile === undefined ? '../default.png' : person.profile;

I got started with Svelte(Kit) and I really like it so far. However, I ran into an issue that I couldn't resolve.

I'm trying to dynamically display images and like to have a fall back image in case the normal one does not exist.

With vanilla HTML/JS, I would use this Source:

<img src="imagefound.gif" onerror="this.onerror=null;this.src='imagenotfound.gif';" />

I tried to make it happen in my Svelte project, but it either does not work (e.g. A) or it works sometimes (for a brief moment or until I refresh (e.g. B)).

This is my code (A):

<script>
let profileImg = person.profile;
const missingProfile = () => {
    console.log('image does not exist');
    profileImg = '../default.png';
};
</script>

...

<img
    src={profileImg}
    on:error={missingProfile}
    alt={person.name}
/>

or just the hardcoded version (B)

<img 
    src="imagefound.gif" 
    onerror="console.log('image not found');this.onerror=null;this.src='./person.png';" 
/>

There is this question, but I believe the answer is what I am doing. Is there a difference whether I use SvelteKit vs. Svelte?

Addition

It looks like that Svelte does not even set the src for the <img />, if the original variable with the url for the image is undefined (in my example person.profile). The accepted answer wouldn't work in that case.

I edited this line to prevent that case:

let profileImg = person.profile === undefined ? '../default.png' : person.profile;

• javascript
• svelte
• sveltekit

• 1 concerning your addition: yes this is correct, the svelte piler does not add the attributes if the value is undefined – Stephane Vanraes Commented Sep 3, 2021 at 7:22

2 Answers 2

This code works in SvelteKit

<script>
    let fallback = 'http://placekitten./200/200'
    let image = ""
    
    const handleError = ev => ev.target.src = fallback
</script>

<img src={image} alt="" on:error={handleError}>

In my case, I wanted to display a different element when the image was not found. With the help I found on this page about using on:error={}, I was able to do this:

{#if image}
    <img
        class="image"
        src={image.url}
        alt="..."
        on:error={() => image = undefined}
    >
{:else}
    <div class="fallback"> ... </div>
{/if}

This way I can handle both scenarios: when the image is not set, and when the image is set but not found. In the event that the image is set but not found, the image variable will be set to undefined and Svelte will then use the :else part and display my other element.