add loading=lazy to RawImg for better perf (#4046)

Author: steve8708

.changeset/angry-ladybugs-jam.md

@@ -0,0 +1,12 @@
+---
+"@builder.io/react": patch
+"@builder.io/sdk-angular": patch
+"@builder.io/sdk-react-nextjs": patch
+"@builder.io/sdk-qwik": patch
+"@builder.io/sdk-react": patch
+"@builder.io/sdk-solid": patch
+"@builder.io/sdk-svelte": patch
+"@builder.io/sdk-vue": patch
+---
+
+Add loading=lazy to RawImg component for better perf

packages/react/src/blocks/raw/Img.tsx

@@ -32,7 +32,12 @@ class ImgComponent extends React.Component<ImgProps> {
     const attributes = this.props.attributes || {};
     const srcset = this.getSrcSet();
     return (
-      <img {...this.props.attributes} src={this.props.image || attributes.src} srcSet={srcset} />
+      <img
+        loading="lazy"
+        {...this.props.attributes}
+        src={this.props.image || attributes.src}
+        srcSet={srcset}
+      />
     );
   }
 }

packages/sdks/src/blocks/img/img.lite.tsx

@@ -51,6 +51,7 @@ export default function ImgComponent(props: ImgProps) {
 
   return (
     <img
+      loading="lazy"
       style={{
         objectFit: props.backgroundSize || 'cover',
         objectPosition: props.backgroundPosition || 'center',