useImage

#API

• #

  useImage(imageOrUrl?: string | HTMLImageElement | null | undefined, crossOrigin?: "anonymous" | "use-credentials" | string) => object

  Fetch and load an image for programatic use such as in a <canvas> element.

  Parameters

  • imageOrUrl?string | HTMLImageElement | null | undefined

    The HtmlImageElement or image url to load

  • crossOrigin?"anonymous" | "use-credentials" | string

    The crossorigin attribute to set

    const { image, error } = useImage('/static/kittens.png')
    const ref = useRef<HTMLCanvasElement>()
    useEffect(() => {
      const ctx = ref.current.getContext('2d')
      if (image) {
        ctx.drawImage(image, 0, 0)
      }
    }, [ref, image])
    return (
      <>
        {error && "there was a problem loading the image"}
        <canvas ref={ref} />
      </>

  Return Value object