fix(image-editor): source not displaying in input

packages/client-core/i18n/en/editor.json

@@ -351,7 +351,7 @@
     "image": {
       "name": "Image",
       "description": "Dynamically loads an image.",
-      "lbl-imgURL": "Image Url",
+      "lbl-imgURL": "Image URL",
       "lbl-transparency": "Transparency Mode",
       "lbl-alphaCutoff": "Alpha Cutoff",
       "lbl-projection": "Projection",

packages/editor/src/components/properties/ImageNodeEditor.tsx

@@ -45,19 +45,30 @@ export const ImageNodeEditor: EditorComponentType = (props) => {
   const imageComponent = useComponent(entity, ImageComponent)
   const errors = getEntityErrors(props.entity, ImageComponent)
 
+  const imageSource =
+    imageComponent.resource.value?.jpegStaticResource?.url ||
+    imageComponent.resource.value?.gifStaticResource?.url ||
+    imageComponent.resource.value?.pngStaticResource?.url ||
+    imageComponent.resource.value?.ktx2StaticResource?.url ||
+    imageComponent.resource.value?.source ||
+    imageComponent.source.value ||
+    ''
+
   return (
     <NodeEditor
       {...props}
       name={t('editor:properties.image.name')}
       description={t('editor:properties.image.description')}
     >
       <InputGroup name="Image Url" label={t('editor:properties.image.lbl-imgURL')}>
-        <ImageInput value={imageComponent.source?.value ?? ''} onChange={updateProperty(ImageComponent, 'source')} />
+        <ImageInput value={imageSource} onChange={updateProperty(ImageComponent, 'source')} />
       </InputGroup>
       {errors ? (
-        Object.entries(errors).map(([err, message]) => {
-          return <div style={{ marginTop: 2, color: '#FF8C00' }}>{'Error: ' + err + '--' + message}</div>
-        })
+        Object.entries(errors).map(([err, message]) => (
+          <div key={err} style={{ marginTop: 2, color: '#FF8C00' }}>
+            {'Error: ' + err + '--' + message}
+          </div>
+        ))
       ) : (
         <></>
       )}

packages/engine/src/scene/components/ImageComponent.ts

@@ -192,7 +192,7 @@ export function ImageReactor() {
         // TODO: abort load request, pending https://github.com/mrdoob/three.js/pull/23070
       }
     },
-    [image.resource]
+    [entity, source]
   )
 
   useEffect(