javascript - 使用 SvelteKit 回退图像

Question

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

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

对于 vanilla 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';" 
/>

---

有这个question ，但我相信答案就是我正在做的。我使用 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}>