Solid Start does not load images on load event?

import { Show, createEffect, createSignal } from "solid-js";

interface LazyImageProps {
  placeholder?: string;
  class?: string;
  src: string;
  alt: string;
}

export default function LazyImage(props: LazyImageProps) {
  const [loading, setLoading] = createSignal(true);

  createEffect(() => {
    console.log("loading", loading());
  });

  const onLoad = (e: any) => {
    console.log(e);
    setLoading(false);
  };

  return (
    <>
      <Show when={loading() && props.placeholder}>
        <img
          src={props.placeholder}
          class={props.class}
          draggable="false"
          alt="placeholder"
          loading="lazy"
        />
      </Show>
      <img
        onLoad={onLoad}
        class={props.class}
        draggable="false"
        src={props.src}
        alt={props.alt}
        loading="lazy"
      />
    </>
  );
}

import { Show, createEffect, createSignal } from "solid-js";

interface LazyImageProps {
  placeholder?: string;
  class?: string;
  src: string;
  alt: string;
}

export default function LazyImage(props: LazyImageProps) {
  const [loading, setLoading] = createSignal(true);

  createEffect(() => {
    console.log("loading", loading());
  });

  const onLoad = (e: any) => {
    console.log(e);
    setLoading(false);
  };

  return (
    <>
      <Show when={loading() && props.placeholder}>
        <img
          src={props.placeholder}
          class={props.class}
          draggable="false"
          alt="placeholder"
          loading="lazy"
        />
      </Show>
      <img
        onLoad={onLoad}
        class={props.class}
        draggable="false"
        src={props.src}
        alt={props.alt}
        loading="lazy"
      />
    </>
  );
}