import { Image } from "vant";
import { defineComponent } from "vue";
import TheLoading from "../TheLoading";
import styles from './index.module.less'

export default defineComponent({
  name: "TheImage",
  props: ["src"],
  setup(props) {
    const imageSlots = {
      loading: () => <TheLoading />,
      error: () => <TheLoading />,
    };
    return () => (
      <Image
        class={styles.image}
        width="100%"
        height="100%"
        lazy-load
        src={props.src}
        v-slots={imageSlots}
      />
    );
  },
});