-
Notifications
You must be signed in to change notification settings - Fork 2.3k
/
Image.svelte
43 lines (36 loc) 路 1.27 KB
/
Image.svelte
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<script lang="ts">
import type { HTMLImgAttributes } from "svelte/elements";
interface Props extends HTMLImgAttributes {
"data-testid"?: string;
}
type $$Props = Props;
import { resolve_wasm_src } from "@gradio/wasm/svelte";
export let src: HTMLImgAttributes["src"] = undefined;
let resolved_src: typeof src;
// The `src` prop can be updated before the Promise from `resolve_wasm_src` is resolved.
// In such a case, the resolved value for the old `src` has to be discarded,
// This variable `latest_src` is used to pick up only the value resolved for the latest `src` prop.
let latest_src: typeof src;
$: {
// In normal (non-Wasm) Gradio, the `<img>` element should be rendered with the passed `src` props immediately
// without waiting for `resolve_wasm_src()` to resolve.
// If it waits, a blank image is displayed until the async task finishes
// and it leads to undesirable flickering.
// So set `src` to `resolved_src` here.
resolved_src = src;
latest_src = src;
const resolving_src = src;
resolve_wasm_src(resolving_src).then((s) => {
if (latest_src === resolving_src) {
resolved_src = s;
}
});
}
</script>
<!-- svelte-ignore a11y-missing-attribute -->
<img src={resolved_src} {...$$restProps} />
<style>
img {
object-fit: cover;
}
</style>