gradio/js/image/shared/Image.svelte
Yuichiro Tachibana (Tsuchiya) b67115e8e6
Lite: Make the Examples component display media files using pseudo HTTP requests to the Wasm server (#5627)
* Create a Wasm-compatible <Image> component in @gradio/lite and use it in @gradio/image/example/Image.svelte

* add changeset

* Fix Image styling

* Move js/wasm/svelte/Image.svelte -> js/image/static/Image.svelte

* Shorten CSS class name

* Create Wasm-compatible video components

* add changeset

* Move the Wasm-compatible `Image` from `static` to `shared`

* Create Wasm-compatible audio components

* Fix `resolve_wasm_src()` to return the passed `src` as-is when the URL is not HTTP or refering to remote

* add changeset

* Fix `resolve_wasm_src()`

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
2023-10-17 01:26:49 +09:00

23 lines
514 B
Svelte

<script lang="ts">
import type { HTMLImgAttributes } from "svelte/elements";
type $$Props = HTMLImgAttributes;
import { resolve_wasm_src } from "@gradio/wasm/svelte";
export let src: HTMLImgAttributes["src"] = undefined;
</script>
{#await resolve_wasm_src(src) then resolved_src}
<!-- svelte-ignore a11y-missing-attribute -->
<img src={resolved_src} {...$$restProps} />
{:catch error}
<p style="color: red;">{error.message}</p>
{/await}
<style>
img {
max-width: 100%;
max-height: 100%;
}
</style>