使用 SvelteKit 回退图像

Question

我开始使用 Svelte(Kit)，到目前为止我真的很喜欢它。然而，我遇到了一个无法解决的问题。

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

对于普通的 HTML/JS，我会使用这个源：

<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 甚至没有设置src，<img />如果带有图像 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}>