plone · wesleybl · Feb 14, 2025
diff --git a/packages/volto/news/6754.internal b/packages/volto/news/6754.internal
@@ -0,0 +1 @@
+Use `Image` from `@plone/volto/components/theme/Image/Image` instead of `semantic-ui-react`. @wesleybl
diff --git a/packages/volto/src/components/manage/Widgets/FileWidget.jsx b/packages/volto/src/components/manage/Widgets/FileWidget.jsx
@@ -5,7 +5,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button, Image, Dimmer } from 'semantic-ui-react';
+import { Button, Dimmer } from 'semantic-ui-react';
 import { readAsDataURL } from 'promise-file-reader';
 import { injectIntl } from 'react-intl';
 import deleteSVG from '@plone/volto/icons/delete.svg';
@@ -16,6 +16,7 @@ import loadable from '@loadable/component';
 import { flattenToAppURL } from '@plone/volto/helpers/Url/Url';
 import { validateFileUploadSize } from '@plone/volto/helpers/FormValidation/FormValidation';
 import { defineMessages, useIntl } from 'react-intl';
+import Image from '@plone/volto/components/theme/Image/Image';
 
 const imageMimetypes = [
   'image/png',
@@ -131,9 +132,8 @@ const FileWidget = (props) => {
             {isDragActive && <Dimmer active></Dimmer>}
             {fileType ? (
               <Image
-                className="image-preview"
+                className="image-preview small ui image"
                 id={`field-${id}-image`}
-                size="small"
                 src={imgsrc}
               />
             ) : (

diff --git a/packages/volto/src/components/manage/Widgets/ObjectBrowserWidget.jsx b/packages/volto/src/components/manage/Widgets/ObjectBrowserWidget.jsx
@@ -12,7 +12,7 @@ import isArray from 'lodash/isArray';
 import isEmpty from 'lodash/isEmpty';
 import remove from 'lodash/remove';
 import { connect } from 'react-redux';
-import { Image, Label, Popup, Button } from 'semantic-ui-react';
+import { Label, Popup, Button } from 'semantic-ui-react';
 import {
   flattenToAppURL,
   isInternalURL,
@@ -33,6 +33,7 @@ import homeSVG from '@plone/volto/icons/home.svg';
 import aheadSVG from '@plone/volto/icons/ahead.svg';
 import blankSVG from '@plone/volto/icons/blank.svg';
 import { withRouter } from 'react-router';
+import Image from '@plone/volto/components/theme/Image/Image';
 
 const messages = defineMessages({
   placeholder: {
@@ -131,7 +132,7 @@ export class ObjectBrowserWidgetComponent extends Component {
             <div className="item-title">
               {includes(config.settings.imageObjects, item['@type']) ? (
                 <Image
-                  size="small"
+                  className="small ui image"
                   src={`${item['@id']}/@@images/image/thumb`}
                 />
               ) : (

diff --git a/packages/volto/src/components/manage/Widgets/RegistryImageWidget.jsx b/packages/volto/src/components/manage/Widgets/RegistryImageWidget.jsx
@@ -5,7 +5,7 @@
 
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import { Button, Image, Dimmer } from 'semantic-ui-react';
+import { Button, Dimmer } from 'semantic-ui-react';
 import { readAsDataURL } from 'promise-file-reader';
 import { injectIntl } from 'react-intl';
 import deleteSVG from '@plone/volto/icons/delete.svg';
@@ -15,6 +15,7 @@ import loadable from '@loadable/component';
 import { defineMessages, useIntl } from 'react-intl';
 import { toPublicURL } from '@plone/volto/helpers/Url/Url';
 import { validateFileUploadSize } from '@plone/volto/helpers/FormValidation/FormValidation';
+import Image from '@plone/volto/components/theme/Image/Image';
 
 const imageMimetypes = [
   'image/png',
@@ -119,9 +120,8 @@ const RegistryImageWidget = (props) => {
             {isDragActive && <Dimmer active></Dimmer>}
             {previewSrc ? (
               <Image
-                className="image-preview"
+                className="image-preview small ui image"
                 id={`field-${id}-image`}
-                size="small"
                 src={previewSrc}
               />
             ) : (

diff --git a/packages/volto/src/components/manage/Widgets/__snapshots__/FileWidget.test.jsx.snap b/packages/volto/src/components/manage/Widgets/__snapshots__/FileWidget.test.jsx.snap
@@ -33,7 +33,9 @@ exports[`FileWidget renders a file widget component with value 1`] = `
             tabindex="0"
           >
             <img
-              class="ui small image image-preview"
+              alt=""
+              class="image-preview small ui image"
+              fetchpriority="high"
               id="field-my-field-image"
               src="http://myfile?id=0"
             />
@@ -116,7 +118,9 @@ exports[`FileWidget renders a file widget component with value in raw data 1`] =
             tabindex="0"
           >
             <img
-              class="ui small image image-preview"
+              alt=""
+              class="image-preview small ui image"
+              fetchpriority="high"
               id="field-my-field-image"
               src="data:image/png;base64,oiweurtksdgfjaslfqw9523563456"
             />

diff --git a/packages/volto/src/components/manage/Widgets/__snapshots__/RegistryImageWidget.test.jsx.snap b/packages/volto/src/components/manage/Widgets/__snapshots__/RegistryImageWidget.test.jsx.snap
@@ -33,7 +33,9 @@ exports[`RegistryImageWidget renders a file widget component with value 1`] = `
             tabindex="0"
           >
             <img
-              class="ui small image image-preview"
+              alt=""
+              class="image-preview small ui image"
+              fetchpriority="high"
               id="field-my-field-image"
               src="http://localhost:3000/@@site-logo/logo.cab945d8.svg"
             />

diff --git a/packages/volto/src/components/theme/Logo/Logo.jsx b/packages/volto/src/components/theme/Logo/Logo.jsx
@@ -4,13 +4,13 @@
  */
 import { defineMessages, useIntl } from 'react-intl';
 import { useEffect } from 'react';
-import { Image } from 'semantic-ui-react';
 import LogoImage from '@plone/volto/components/theme/Logo/Logo.svg';
 import { useSelector, useDispatch } from 'react-redux';
 import { Link, useLocation } from 'react-router-dom';
 import { getNavroot } from '@plone/volto/actions/navroot/navroot';
 import { flattenToAppURL, getBaseUrl } from '@plone/volto/helpers/Url/Url';
 import { hasApiExpander } from '@plone/volto/helpers/Utils/Utils';
+import Image from '@plone/volto/components/theme/Image/Image';
 
 /**
  * Logo component class.
@@ -47,6 +47,7 @@ const Logo = () => {
   return (
     <Link to={navRootPath} aria-label={intl.formatMessage(messages.home)}>
       <Image
+        className="ui image"
         src={
           site['plone.site_logo']
             ? flattenToAppURL(site['plone.site_logo'])

diff --git a/packages/volto/src/components/theme/Logo/__snapshots__/Logo.Multilingual.test.jsx.snap b/packages/volto/src/components/theme/Logo/__snapshots__/Logo.Multilingual.test.jsx.snap
@@ -9,6 +9,7 @@ exports[`Multilingual Logo renders a logo component in a multilingual site langu
   <img
     alt="Logo of Plone Site"
     className="ui image"
+    fetchpriority="high"
     src="Logo.svg"
   />
 </a>
@@ -23,6 +24,7 @@ exports[`Multilingual Logo renders a logo component in a multilingual site root
   <img
     alt="Logo of Plone Site"
     className="ui image"
+    fetchpriority="high"
     src="Logo.svg"
   />
 </a>
@@ -37,6 +39,7 @@ exports[`Multilingual Logo renders a logo component with a custom logo in a non-
   <img
     alt="Logo of Plone Site"
     className="ui image"
+    fetchpriority="high"
     src="/@@site-logo/logo.cab945d8.svg"
   />
 </a>
@@ -51,6 +54,7 @@ exports[`Multilingual Logo renders a logo component with a custom logo in a non-
   <img
     alt="Logo of Plone Site"
     className="ui image"
+    fetchpriority="high"
     src="/@@site-logo/logo.cab945d8.svg"
   />
 </a>

diff --git a/packages/volto/src/components/theme/Logo/__snapshots__/Logo.test.jsx.snap b/packages/volto/src/components/theme/Logo/__snapshots__/Logo.test.jsx.snap
@@ -9,6 +9,7 @@ exports[`Logo renders a logo component with a custom logo 1`] = `
   <img
     alt="Logo of Plone Site"
     className="ui image"
+    fetchpriority="high"
     src="/@@site-logo/logo.cab945d8.svg"
   />
 </a>
@@ -23,6 +24,7 @@ exports[`Logo renders a logo component with a custom logo in a non-root url 1`]
   <img
     alt="Logo of Plone Site"
     className="ui image"
+    fetchpriority="high"
     src="/@@site-logo/logo.cab945d8.svg"
   />
 </a>
@@ -37,6 +39,7 @@ exports[`Logo renders a logo component with default config 1`] = `
   <img
     alt="Logo of Plone Site"
     className="ui image"
+    fetchpriority="high"
     src="Logo.svg"
   />
 </a>
@@ -51,6 +54,7 @@ exports[`Logo renders a logo component with default config in a non-root url 1`]
   <img
     alt="Logo of Plone Site"
     className="ui image"
+    fetchpriority="high"
     src="/@@site-logo/logo.cab945d8.svg"
   />
 </a>

diff --git a/packages/volto/src/components/theme/Navigation/ContextNavigation.jsx b/packages/volto/src/components/theme/Navigation/ContextNavigation.jsx
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { List, Image } from 'semantic-ui-react';
+import { List } from 'semantic-ui-react';
 import { Link as RouterLink } from 'react-router-dom';
 import cx from 'classnames';
 import { compose } from 'redux';
@@ -13,6 +13,7 @@ import UniversalLink from '@plone/volto/components/manage/UniversalLink/Universa
 import { withContentNavigation } from './withContentNavigation';
 
 import leftIcon from '@plone/volto/icons/left-key.svg';
+import Image from '@plone/volto/components/theme/Image/Image';
 
 const messages = defineMessages({
   navigation: {
@@ -38,7 +39,11 @@ function renderNode(node, parentLevel) {
               in_path: node.is_in_path,
             })}
           >
-            {node.thumb ? <Image src={flattenToAppURL(node.thumb)} /> : ''}
+            {node.thumb ? (
+              <Image src={flattenToAppURL(node.thumb)} className="ui image" />
+            ) : (
+              ''
+            )}
             {node.title}
             {node.is_current ? (
               <List.Content className="active-indicator">
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		Use `Image` from `@plone/volto/components/theme/Image/Image` instead of `semantic-ui-react`. @wesleybl