mirror of
https://github.com/gradio-app/gradio.git
synced 2024-12-21 02:19:59 +08:00
8dd6f4bc19
* handle null examples * add changeset * add changeset * lint * merge conflict * fixes * add changeset * stories * feedback * examples --------- Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
44 lines
1.3 KiB
Svelte
44 lines
1.3 KiB
Svelte
<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>
|