S
SolidJS•8mo ago
Daniel Sousa @TutoDS

Image optimization & createAsync saying that can be null

Hi everyone I have two questions: - I need to create a image componente that at the begin loads a small and blurred image, but after the load completes show the full quality image. I try an example using IntersectionObserver, but at the begining the image doesn't appear. - The second one is with createAsync where: 
const getAvailableServices = cache(async (): Promise<GetAvailableServicesQueryResult>
const getAvailableServices = cache(async (): Promise<GetAvailableServicesQueryResult>
When I'm using the type is GetAvailableServicesQueryResult | undefined Any idea?
No description
1 Reply
Daniel Sousa @TutoDS
Daniel Sousa @TutoDSOP•8mo ago
For the image, I have a low quality image file with blur to load and try to do this: 
import { createSignal, JSX, mergeProps, splitProps } from "solid-js";
import { cn } from "~/shared/utils";

type HeroBackgroundImageProps = Pick<JSX.ImgHTMLAttributes<HTMLImageElement>, 'srcSet' | 'sizes' | 'loading' | 'alt' | 'class'> & {
  /**
  * Image source.
  */
  src: NonNullable<JSX.ImgHTMLAttributes<HTMLImageElement>['src']>

  /**
  * Low quality image to show during the load.
  */
  blurHash?: string
}

function HeroBackgroundImage(originalProps: HeroBackgroundImageProps) {
  /**
  * Hooks to set default values for props and split it into groups.
  */
  const props = mergeProps({ alt: 'Impulsionar', class: '' }, originalProps);
  const [sources, commonProps] = splitProps(
    props,
    ["src", "srcSet", "blurHash"],
    ["alt", 'loading', "sizes", 'class']
  );

  const [imageSrc, setImageSrc] = createSignal(sources.blurHash ?? '')

  return <img
    {...commonProps}
    srcSet={sources.srcSet ?? undefined}
    loading={commonProps.loading ?? 'lazy'}
    src={imageSrc()}
    alt={commonProps.alt}
    onLoad={evt => {
      evt.preventDefault()
      setImageSrc(sources.src)
    }}
    class={cn(['-z-10 absolute inset-0 size-full object-cover', commonProps.class])}
  />
}

export { HeroBackgroundImage };
export type { HeroBackgroundImageProps };
import { createSignal, JSX, mergeProps, splitProps } from "solid-js";
import { cn } from "~/shared/utils";

type HeroBackgroundImageProps = Pick<JSX.ImgHTMLAttributes<HTMLImageElement>, 'srcSet' | 'sizes' | 'loading' | 'alt' | 'class'> & {
  /**
  * Image source.
  */
  src: NonNullable<JSX.ImgHTMLAttributes<HTMLImageElement>['src']>

  /**
  * Low quality image to show during the load.
  */
  blurHash?: string
}

function HeroBackgroundImage(originalProps: HeroBackgroundImageProps) {
  /**
  * Hooks to set default values for props and split it into groups.
  */
  const props = mergeProps({ alt: 'Impulsionar', class: '' }, originalProps);
  const [sources, commonProps] = splitProps(
    props,
    ["src", "srcSet", "blurHash"],
    ["alt", 'loading', "sizes", 'class']
  );

  const [imageSrc, setImageSrc] = createSignal(sources.blurHash ?? '')

  return <img
    {...commonProps}
    srcSet={sources.srcSet ?? undefined}
    loading={commonProps.loading ?? 'lazy'}
    src={imageSrc()}
    alt={commonProps.alt}
    onLoad={evt => {
      evt.preventDefault()
      setImageSrc(sources.src)
    }}
    class={cn(['-z-10 absolute inset-0 size-full object-cover', commonProps.class])}
  />
}

export { HeroBackgroundImage };
export type { HeroBackgroundImageProps };

Did you find this page helpful?