Initial commit

Co-Authored-By: Eric Tuvesson <eric.tuvesson@gmail.com>
Co-Authored-By: mikaeltellhed <2311083+mikaeltellhed@users.noreply.github.com>
Co-Authored-By: kotte <14197736+mrtamagotchi@users.noreply.github.com>
Co-Authored-By: Anders Larsson <64838990+anders-topp@users.noreply.github.com>
Co-Authored-By: Johan  <4934465+joolsus@users.noreply.github.com>
Co-Authored-By: Tore Knudsen <18231882+torekndsn@users.noreply.github.com>
Co-Authored-By: victoratndl <99176179+victoratndl@users.noreply.github.com>

packages/noodl-viewer-react/src/components/visual/Image/Image.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+
+import Layout from '../../../layout';
+import PointerListeners from '../../../pointerlisteners';
+import { Noodl } from '../../../types';
+
+export interface ImageProps extends Noodl.ReactProps {
+  dom: {
+    alt?: string;
+    src: string;
+    onLoad?: () => void;
+  };
+}
+
+export function Image(props: ImageProps) {
+  const style = { ...props.style };
+
+  Layout.size(style, props);
+  Layout.align(style, props);
+
+  if (style.opacity === 0) {
+    style.pointerEvents = 'none';
+  }
+
+  if (props.dom?.src?.startsWith('/')) {
+    // @ts-expect-error missing Noodl typings
+    const baseUrl = Noodl.Env['BaseUrl'];
+    if (baseUrl) {
+      props.dom.src = baseUrl + props.dom.src.substring(1);
+    }
+  }
+
+  return <img className={props.className} {...props.dom} {...PointerListeners(props)} style={style} />;
+}