t-image

This component displays an image from the network by providing its source. It supports lazy loading and load transition and provides a placeholder slot.

Basic Usage

<TImage
  src="https://source.unsplash.com/460x300/?london"
  width="460"
  height="300" //
/>

Aspect Ratio

<TGrid
  cols="3"
  gap="2" //
>
  <TImage
    ratio="1"
    src="https://source.unsplash.com/500x500/?newyork" //
  />
</TGrid>

t-loading as a Placeholder

<TImage
  ratio={9 / 16}
  src="https://source.unsplash.com/1200x700/?dubai"
  placeholder={(progress) => (
    <TLoading
      value={progress} //
    />
  )}
/>

Lazy Loading Disabled

<TImage
  ratio={9 / 16}
  src="https://source.unsplash.com/2400x1400/?bigben"
  lazy={false} //
/>

Retry

export default defineComponent({
  setup() {
    const src = ref("wrong_image");

    const onRetry = () => {
      src.value = "https://source.unsplash.com/1200x700/?dubai";
    };

    return () => (
      <TImage
        key={src.value}
        ratio={9 / 16}
        src={src.value}
        onClick={onRetry}
        retry //
      />
    );
  },
});

API

No options available

Data

t-fetch-entry

Media

t-video

Table of Contents