Adding style to <SanityImage /> causes breaks lqip preview position

[heggemsnes]

Great stuff as always

I'm using style on the image to make hotspot work correctly when using object fit like this:

 <SanityImage
      id={_ref}
      projectId={env.NEXT_PUBLIC_SANITY_PROJECT_ID}
      dataset={env.NEXT_PUBLIC_SANITY_DATASET}
      width={width ?? undefined}
      height={height ?? undefined}
      mode="cover"
      hotspot={hotspot ?? undefined}
      crop={crop ?? undefined}
      preview={lqip}
      alt={alt ?? ""}
      sizes={sizes}
      style={{
        objectPosition: hotspot
          ? `${hotspot?.x * 100}% ${hotspot?.y * 100}%`
          : "center",
      }}
      loading={eager ? "eager" : "lazy"}
      className={cn(className)}
    />

I think due to the spread of props in the ImageWithPreview file using the style like this overwrites the styles while the image is loading.

[coreyward]

If I'm understanding you, you're saying that when you pass the style prop it replaces the default styles that are set on the full-size image during loading, right? If so, this is something I can fix, but I won't have bandwidth to do so for at least a few days. In the meantime, the simplest way to work around this is to include the default styles shown below in styles you set on the page scoped to the [data-loading] selector. Unfortunately you cannot do this via style prop.

sanity-image/src/ImageWithPreview.tsx

Lines 43 to 67 in ebfbb6f

	<Img
	data-loading={loaded ? null : true}
	onLoad={onLoad}
	ref={ref}
	style={
	loaded
	? undefined
	: {
	// must be > 4px to be lazy loaded
	height: "10px !important",
	// must be > 4px to be lazy loaded
	width: "10px !important",
	// Cannot use negative x or y values, visibility: hidden, or display: none
	// to hide or the image might not get loaded.
	position: "absolute",
	zIndex: -10,
	opacity: 0,
	// Disable pointer events and user select to prevent the image
	// from interfering with UI while it's loading/hidden.
	pointerEvents: "none",
	userSelect: "none",
	}

[heggemsnes]

Yes Corey, you understood my rambling issue perfectly.

No stress and apologize for the bad issue, was a late night problem 🙃