使用 SvelteKit 回退图像

Question

我开始使用 Svelte(Kit)，到目前为止我非常喜欢它。但是，我运行遇到了一个我无法解决的问题。

我正在尝试动态显示图像，并希望有备用图像以防正常图像不存在。

对于原版 HTML/JS，我会使用这个 Source:

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

我试图在我的 Svelte 项目中实现它，但它要么不起作用（例如 A），要么有时起作用（短暂或直到我刷新（例如 B））。

这是我的代码 (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}
/>

或者只是硬编码版本 (B)

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

有这个，但我相信答案就是我正在做的。我使用 SvelteKit 还是 Svelte 有区别吗？

加法

看起来 Svelte 甚至没有为 <img /> 设置 src，如果图像的 url 的原始变量是 undefined（在我的例子 person.profile)。在这种情况下，接受的答案将不起作用。

我编辑了这一行以防止出现这种情况：

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

Answer 1

此代码适用于 SvelteKit

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

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

使用 SvelteKit 回退图像

Fall back image with SvelteKit

javascript

svelte

sveltekit

加法