Allow Image Widget value to be an object in which case we use the '@id'…

… for value of the Image Sidebar preview (#6156)

packages/volto/news/6156.bugfix

@@ -0,0 +1,2 @@
+Allow `ImageWidget` value to be an object and use the `@id` to get the value if present. 
+This is useful for fields that were using the `object_browser` widget previously to set values. @ichim-david

packages/volto/src/components/manage/Widgets/ImageWidget.jsx

@@ -78,6 +78,7 @@ const UnconnectedImageInput = (props) => {
     placeholderLinkInput = '',
     onSelectItem,
   } = props;
+  const imageValue = value?.[0]?.['@id'] || value;
 
   const intl = useIntl();
   const linkEditor = useLinkEditor();
@@ -155,7 +156,7 @@ const UnconnectedImageInput = (props) => {
   }, [restrictFileUpload]);
   const onDragLeave = React.useCallback(() => setDragging(false), []);
 
-  return value ? (
+  return imageValue ? (
     <div
       className="image-upload-widget-image"
       onClick={onFocus}
@@ -166,9 +167,9 @@ const UnconnectedImageInput = (props) => {
       <img
         className={props.className}
         src={
-          isInternalURL(value)
-            ? `${flattenToAppURL(value)}/@@images/image/${imageSize}`
-            : value
+          isInternalURL(imageValue)
+            ? `${flattenToAppURL(imageValue)}/@@images/image/${imageSize}`
+            : imageValue
         }
         alt=""
       />
@@ -272,7 +273,7 @@ const UnconnectedImageInput = (props) => {
                 </div>
                 {linkEditor.anchorNode && (
                   <linkEditor.LinkEditor
-                    value={value}
+                    value={imageValue}
                     placeholder={
                       placeholderLinkInput ||
                       intl.formatMessage(messages.linkAnImage)