fix using refs and events

Author: DustinJSilk

apps/qwik-demo-app/src/routes/index.tsx

@@ -1,12 +1,18 @@
-import { component$ } from '@builder.io/qwik';
+import { component$, useSignal } from '@builder.io/qwik';
 import { providers, selectedProvider } from '../providers';
 import { Image } from 'qwik-image';
 
 export default component$(() => {
+  const ref = useSignal<HTMLImageElement>();
+
   return (
     <>
       Selected Provider<h1>{selectedProvider}</h1>
       <Image
+        ref={ref}
+        onLoad$={() => {
+          console.log('loaded');
+        }}
         width={400}
         height={400}
         style={{ border: '2px solid red' }}

packages/qwik-image/src/lib/image.tsx

@@ -1,6 +1,7 @@
 import {
   QRL,
   QwikIntrinsicElements,
+  Signal,
   component$,
   createContextId,
   useComputed$,
@@ -10,7 +11,7 @@ import {
 
 export const DEFAULT_RESOLUTIONS = [3840, 1920, 1280, 960, 640];
 
-type ImageAttributes = Omit<QwikIntrinsicElements['img'], 'ref'>;
+type ImageAttributes = QwikIntrinsicElements['img'];
 
 /**
  * @alpha
@@ -220,7 +221,10 @@ export const Image = component$<ImageProps>((props) => {
     children: undefined,
   };
 
-  const style = useComputed$(() => ({ ...props.style, ...getStyles(props) }));
+  const style = useComputed$(() => ({
+    ...props.style,
+    ...getStyles(props),
+  }));
   const sizes = useComputed$(() => getSizes(props));
   const srcSet = useComputed$(() => {
     const { src, width, height, aspectRatio, layout } = props;