时间戳

首页 > 解决方案 > 使用 SvelteKit 回退图像

javascript - 使用 SvelteKit 回退图像

问题描述

我开始使用 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';" 
/>

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

添加

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

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

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

标签： javascriptsveltesveltekit

解决方案

此代码适用于 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}>

推荐阅读