@configuratorware/configurator-frontendgui 1.50.4 → 1.51.1

package/App/Modules/Creator/Components/Option/index.js

@@ -288,6 +288,9 @@ var Option = function Option(_ref) {
     var src = (0, _getImageUrl["default"])(thumbnail);
     return src && /*#__PURE__*/_react["default"].createElement("img", {
       src: src,
+      alt: (0, _i18n.t)('ariaLabels.optionImage', {
+        title: option.title
+      }),
       onError: setImageAvailability
     });
   };

package/App/Modules/Creator/Components/Optiondetail/index.js

@@ -305,7 +305,8 @@ var Optiondetail = /*#__PURE__*/function (_React$Component) {
         onClose = _this$props5.onClose,
         details = _this$props5.details,
         classes = _this$props5.classes,
-        width = _this$props5.width;
+        width = _this$props5.width,
+        optionclassification = _this$props5.optionclassification;
       var _this$state = this.state,
         loading = _this$state.loading,
         loadingContainerHeight = _this$state.loadingContainerHeight;
@@ -386,7 +387,10 @@ var Optiondetail = /*#__PURE__*/function (_React$Component) {
         onLoad: this.handleImageLoaded,
         className: this.state.zoomImage && ['xs', 'sm'].includes(width) ? classes.imageHidden : classes.image,
         src: (0, _getImageUrl["default"])(detailImage),
-        alt: details.title
+        alt: (0, _i18n.T)('ariaLabels.optionDetailsImage', {
+          componentTitle: optionclassification.title,
+          optionTitle: details.title
+        })
       })), detailsContent) : detailsContent, showNav && /*#__PURE__*/_react["default"].createElement("div", {
         className: (0, _clsx2["default"])(classes.detailNav, 'next'),
         onClick: this.next

package/App/Modules/Creator/Components/ProductPart/index.js

@@ -45,7 +45,11 @@ var ProductPart = function ProductPart(_ref) {
       className: "".concat(classes.icon, " ").concat(direction),
       style: imageUrl ? {
         backgroundImage: 'url(' + imageUrl + ')'
-      } : {}
+      } : {},
+      "aria-label": (0, _i18n.t)('ariaLabels.component', {
+        title: optionclassification.title
+      }),
+      role: "img"
     });
   };
   var displayText = function displayText() {

package/App/Modules/Designer/Components/ImageEditDialog/index.js

@@ -400,7 +400,6 @@ var ImageEditDialog = /*#__PURE__*/function (_React$Component) {
         closePreviewDialog = _this$props2.closePreviewDialog,
         continueClick = _this$props2.continueClick,
         loaderComponent = _this$props2.loaderComponent,
-        colorPickerEnabled = _this$props2.colorPickerEnabled,
         imageColorizeElement = _this$props2.imageColorizeElement,
         activeTabIndex = _this$props2.activeTabIndex,
         width = _this$props2.width,
@@ -611,7 +610,7 @@ var ImageEditDialog = /*#__PURE__*/function (_React$Component) {
         }),
         label: (0, _i18n.t)('fileUpload.removeBackgroundEverywhere'),
         disabled: backgroundSelected === null
-      })))), colorPickerEnabled && /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      })))), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
         variant: "caption",
         className: classes.colorizeCaption
       }, colorizeIcon !== null && colorizeIcon !== void 0 ? colorizeIcon : /*#__PURE__*/_react["default"].createElement(_Icon["default"], null, "colorize"), /*#__PURE__*/_react["default"].createElement("i", null, (0, _i18n.t)((0, _withWidth.isWidthDown)('xs', width) ? 'fileUpload.tabColorForRemove' : 'fileUpload.chooseColorForRemove')))), activeTabIndex === 2 && /*#__PURE__*/_react["default"].createElement("div", {

package/App/Modules/Designer/Containers/AddGalleryImage.js

@@ -44,7 +44,7 @@ var getGalleryImages = (0, _createSelector["default"])(function (imageGallerySta
   var host = (0, _configuration.getConf)('network.host');
   return images.map(function (image) {
     return _objectSpread(_objectSpread({}, image), {}, {
-      url: "".concat(host).concat(image.thumbUrl)
+      url: image.thumbUrl.startsWith('http') ? image.thumbUrl : "".concat(host).concat(image.thumbUrl)
     });
   });
 });

package/App/Modules/Designer/Containers/ImageEditDialog.js

@@ -121,32 +121,33 @@ var ImageEditDialogContainer = exports.ImageEditDialogContainer = /*#__PURE__*/f
     });
     _defineProperty(_assertThisInitialized(_this), "lastImageUpdateData", null);
     _defineProperty(_assertThisInitialized(_this), "updateOriginalPreview", /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
-      var image, previewUrl, isSvg, svgContent, preview;
+      var image, url, previewUrl, isSvg, svgContent, preview;
       return _regeneratorRuntime().wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
             image = _this.props.image;
-            previewUrl = "".concat((0, _configuration.getConf)('network.host')).concat(image.preview.url);
+            url = (0, _get["default"])(image, 'preview.url', '');
+            previewUrl = url.startsWith('http') ? url : "".concat((0, _configuration.getConf)('network.host')).concat(url);
             isSvg = previewUrl && /\.svg$/.test(previewUrl);
             if (!isSvg) {
-              _context.next = 11;
+              _context.next = 12;
               break;
             }
-            _context.next = 6;
+            _context.next = 7;
             return (0, _DesignDataService.getSvgContent)(previewUrl, true);
-          case 6:
+          case 7:
             svgContent = _context.sent;
             preview = (0, _DesignDataService.applySvgContentOperations)(image.preview, null, svgContent);
             _this.setState({
               originalImagePreview: preview
             });
-            _context.next = 12;
+            _context.next = 13;
             break;
-          case 11:
+          case 12:
             _this.setState({
               originalImagePreview: previewUrl
             });
-          case 12:
+          case 13:
           case "end":
             return _context.stop();
         }
@@ -394,7 +395,6 @@ var ImageEditDialogContainer = exports.ImageEditDialogContainer = /*#__PURE__*/f
           _options$forceFetch,
           forceFetch,
           image,
-          activeTabIndex,
           preview,
           originalImagePreview,
           previewUrl,
@@ -408,36 +408,32 @@ var ImageEditDialogContainer = exports.ImageEditDialogContainer = /*#__PURE__*/f
               options = _args6.length > 1 && _args6[1] !== undefined ? _args6[1] : {};
               _options$forceFetch = options.forceFetch, forceFetch = _options$forceFetch === void 0 ? false : _options$forceFetch;
               image = _this.props.image;
-              activeTabIndex = _this.state.activeTabIndex;
               preview = null;
               originalImagePreview = null;
               previewUrl = image === null || image === void 0 || (_image$preview = image.preview) === null || _image$preview === void 0 ? void 0 : _image$preview.url;
-              if (previewUrl && activeTabIndex === 1) {
-                previewUrl = (0, _Transformers.getRasterURL)(previewUrl);
-              }
               isSvg = previewUrl && /\.svg$/.test(previewUrl);
               if (!image) {
-                _context6.next = 22;
+                _context6.next = 20;
                 break;
               }
               updateSVG = isSvg;
               if (!updateSVG) {
-                _context6.next = 19;
+                _context6.next = 17;
                 break;
               }
               if (svgContent) {
-                _context6.next = 16;
+                _context6.next = 14;
                 break;
               }
-              _context6.next = 15;
-              return (0, _DesignDataService.getSvgContent)(image.preview.url, false, forceFetch);
-            case 15:
+              _context6.next = 13;
+              return (0, _DesignDataService.getSvgContent)(image.preview.url, image.preview.url.startsWith('http'), forceFetch);
+            case 13:
               svgContent = _context6.sent;
-            case 16:
+            case 14:
               preview = (0, _DesignDataService.applySvgContentOperations)(image.preview, image.displayColorPreview ? image.operations : null, svgContent);
-              _context6.next = 22;
+              _context6.next = 20;
               break;
-            case 19:
+            case 17:
               forceUpdate = isImageInvalidatedByChange(_this.lastImageUpdateData, image);
               if (forceUpdate) {
                 _this.previewVersion = Math.random();
@@ -446,13 +442,13 @@ var ImageEditDialogContainer = exports.ImageEditDialogContainer = /*#__PURE__*/f
                 preview = (0, _Selectors3.getPreviewUrlFromImageData)(previewUrl) + (_this.previewVersion ? "?".concat(_this.previewVersion) : '');
                 originalImagePreview = preview;
               }
-            case 22:
+            case 20:
               _this.lastImageUpdateData = image;
               _this.setState({
                 preview: preview,
                 originalImagePreview: originalImagePreview
               });
-            case 24:
+            case 22:
             case "end":
               return _context6.stop();
           }
@@ -793,7 +789,6 @@ var ImageEditDialogContainer = exports.ImageEditDialogContainer = /*#__PURE__*/f
         closePreviewDialog: this.closePreviewDialog,
         backgroundSelected: clipping,
         preview: preview,
-        colorPickerEnabled: !!clipping,
         uploadDelayed: uploadDelayed,
         continueButtonDisabled: continueButtonDisabled,
         continueClick: this.continueClick,
@@ -882,7 +877,7 @@ var getUserImages = (0, _createSelector["default"])(function (imageGalleryState)
   });
   return userImages.map(function (image) {
     return _objectSpread(_objectSpread({}, image), {}, {
-      url: "".concat(host).concat(image.thumbnail.url)
+      url: image.thumbnail.url.startsWith('http') ? image.thumbnail.url : "".concat(host).concat(image.thumbnail.url)
     });
   });
 });

package/App/Reducers/ImageGallery/Selectors.js

@@ -23,7 +23,7 @@ var getPreviewUrlFromImageData = exports.getPreviewUrlFromImageData = function g
   }
   var _options$host = options.host,
     host = _options$host === void 0 ? (0, _configuration.getConf)('network.host', '') : _options$host;
-  return "".concat(host).concat(previewUrl);
+  return previewUrl.startsWith('http') ? previewUrl : "".concat(host).concat(previewUrl);
 };
 var isEditableVectorImage = exports.isEditableVectorImage = function isEditableVectorImage(preview) {
   return preview && preview.url && (/.svg$/.test(preview.url) || /^data:image\/svg\+xml/.test(preview.url));

package/App/Screens/DesignerProductPreview/DesignerProductPreviewManager.js

@@ -70,7 +70,7 @@ var prepareImageData = function createImageDataPreProcessor() {
               break;
             }
             _context.next = 11;
-            return (0, _DesignDataService.getSvgContent)(imageData.preview.url, false, true);
+            return (0, _DesignDataService.getSvgContent)(imageData.preview.url, imageData.preview.url.startsWith('http'), true);
           case 11:
             svgContent = _context.sent;
             svgColors = (0, _DesignDataService.getSvgColors)(svgContent, designProductionMethod);

package/App/Services/DesignDataService.js

@@ -153,7 +153,11 @@ var calculateImageBrightness = exports.calculateImageBrightness = function calcu
   if (!image) {
     return;
   }
-  var imageUrl = image.data && image.data.thumbnail ? "".concat((0, _configuration.getConf)('network.host')).concat(image.data.thumbnail.url) : null;
+  var thumbnail = (0, _get2["default"])(image, 'data.thumbnail.url', null);
+  var imageUrl = null;
+  if (thumbnail) {
+    imageUrl = thumbnail.startsWith('http') ? thumbnail : "".concat((0, _configuration.getConf)('network.host')).concat(thumbnail);
+  }
   var fuzzy = 0.1;
   return new Promise(function (resolve, reject) {
     var downloadedImg = new Image(200, 200);
@@ -2457,7 +2461,7 @@ var DesignDataService = exports["default"] = /*#__PURE__*/function () {
           while (1) switch (_context33.prev = _context33.next) {
             case 0:
               _context33.next = 2;
-              return getSvgContent(url);
+              return getSvgContent(url, url.startsWith('http'));
             case 2:
               svgContent = _context33.sent;
               designProductionMethod = (0, _Selectors.getSelectedDesignProductionMethod)(_ServiceLocator.Services.store.state);
@@ -2483,7 +2487,7 @@ var DesignDataService = exports["default"] = /*#__PURE__*/function () {
           while (1) switch (_context34.prev = _context34.next) {
             case 0:
               _context34.next = 2;
-              return getSvgContent(url);
+              return getSvgContent(url, url.startsWith('http'));
             case 2:
               svgContent = _context34.sent;
               svgTag = (_svgContent$match = svgContent.match(/<svg[^>]+>/)) === null || _svgContent$match === void 0 ? void 0 : _svgContent$match[0];
@@ -2688,7 +2692,7 @@ var DesignDataService = exports["default"] = /*#__PURE__*/function () {
               }
               _designProductionMethod = (0, _Selectors.getSelectedDesignProductionMethod)(_ServiceLocator.Services.store.state);
               _context36.next = 35;
-              return getSvgContent(preview.url, false, !operationsMatching);
+              return getSvgContent(preview.url, preview.url.startsWith('http'), !operationsMatching);
             case 35:
               svgContent = _context36.sent;
               svgColors = getSvgColors(svgContent, _designProductionMethod);

package/App/Services/DesignerService.js

@@ -40,9 +40,10 @@ function getCanvasImageScalingWithImageData(canvasImage, imageData) {
   return canvasImage.scaling * (currentPreview.width / nextPreview.width);
 }
 function updateCanvasImageWithImageData(canvasImage, imageData) {
+  var _imageData$preview$ur;
   return canvasImage.updateOptions((0, _Transformers.prepareImageObjectData)({
     imageData: imageData,
-    src: "".concat((0, _configuration.getConf)('network.host')).concat(imageData.preview.url),
+    src: (_imageData$preview$ur = imageData.preview.url) !== null && _imageData$preview$ur !== void 0 && _imageData$preview$ur.startsWith('http') ? imageData.preview.url : "".concat((0, _configuration.getConf)('network.host')).concat(imageData.preview.url),
     scaling: getCanvasImageScalingWithImageData(canvasImage, imageData)
   }));
 }
@@ -259,7 +260,7 @@ var DesignerService = exports["default"] = /*#__PURE__*/function () {
               throw new Error('Preview image url is not specified!');
             case 10:
               _ServiceLocator.Services.store.dispatch((0, _Actions.updateUploadDelayed)(false));
-              return _context5.abrupt("return", "".concat((0, _configuration.getConf)('network.host')).concat(url));
+              return _context5.abrupt("return", url.startsWith('http') ? url : "".concat((0, _configuration.getConf)('network.host')).concat(url));
             case 12:
             case "end":
               return _context5.stop();

package/App/Shared/Components/ConfigurationOverview/index.js

@@ -11,6 +11,7 @@ var _Typography = _interopRequireDefault(require("@material-ui/core/Typography")
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _get = _interopRequireDefault(require("lodash/get"));
 var _getImageUrl = _interopRequireDefault(require("../../../Utils/getImageUrl"));
+var _i18n = require("../../../../Framework/i18n");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
@@ -88,10 +89,14 @@ var ConfigurationOverview = /*#__PURE__*/function (_React$Component) {
       var _this$props = this.props,
         optionclassifications = _this$props.optionclassifications,
         classes = _this$props.classes;
-      var renderImage = function renderImage(thumbnail) {
+      var renderImage = function renderImage(thumbnail, componentTitle, optionTitle) {
         var src = (0, _getImageUrl["default"])(thumbnail);
         return src && /*#__PURE__*/_react["default"].createElement("img", {
-          src: src
+          src: src,
+          alt: (0, _i18n.t)('ariaLabels.overViewSelectedOptionImage', {
+            componentTitle: componentTitle,
+            optionTitle: optionTitle
+          })
         });
       };
       return /*#__PURE__*/_react["default"].createElement("div", {
@@ -114,11 +119,11 @@ var ConfigurationOverview = /*#__PURE__*/function (_React$Component) {
             className: classes.options
           }, option.amount !== 1 ? /*#__PURE__*/_react["default"].createElement("div", {
             className: classes.image
-          }, renderImage((0, _get["default"])(option, 'thumbnail', '')), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+          }, renderImage((0, _get["default"])(option, 'thumbnail', ''), optionclassification.title, option.title), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
             className: classes.option
           }, option.amount, " x ", option.title)) : /*#__PURE__*/_react["default"].createElement("div", {
             className: classes.image
-          }, renderImage((0, _get["default"])(option, 'thumbnail', '')), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+          }, renderImage((0, _get["default"])(option, 'thumbnail', ''), optionclassification.title, option.title), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
             className: classes.option
           }, option.title)));
         }))));

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@configuratorware/configurator-frontendgui",
-  "version": "1.50.4",
+  "version": "1.51.1",
   "license": "UNLICENSED",
   "private": false,
   "main": "./index.js",
   "dependencies": {
     "@babel/polyfill": "^7.12.1",
-    "@configuratorware/scripts": "1.50.4",
+    "@configuratorware/scripts": "1.51.1",
     "@material-ui/core": "^4.12.4",
     "@material-ui/icons": "^4.11.3",
     "@material-ui/lab": "^4.0.0-alpha.61",
@@ -36,8 +36,8 @@
     "react-router-dom": "^5.3.4",
     "react-swipeable": "^5.5.1",
     "react-zoom-pan-pinch": "^2.1.3",
-    "redhotmagma-graphics-editor": "1.50.4",
-    "redhotmagma-visualization": "1.50.4",
+    "redhotmagma-graphics-editor": "1.51.1",
+    "redhotmagma-visualization": "1.51.1",
     "redux": "^4.1.0",
     "redux-logger": "^3.0.6",
     "redux-persist": "^5.10.0",

package/public/translations/de_DE.json

@@ -474,5 +474,11 @@
     "title": "Produktübersicht",
     "customize": "Konfigurieren",
     "noItems": "Keine verfügbaren Produkte"
+  },
+  "ariaLabels": {
+    "component": "Komponente: %{title}",
+    "optionImage": "Option: %{title}",
+    "optionDetailsImage": "Detailansicht: %{componentTitle} %{optionTitle}",
+    "overViewSelectedOptionImage": "Meine Konfiguration: %{componentTitle} %{optionTitle}"
   }
 }

package/public/translations/en_GB.json

@@ -474,5 +474,11 @@
     "title": "Item Overview",
     "customize": "Customize",
     "noItems": "No available items"
+  },
+  "ariaLabels": {
+    "component": "Component: %{title}",
+    "optionImage": "Option: %{title}",
+    "optionDetailsImage": "Detailed view: %{componentTitle} %{optionTitle}",
+    "overViewSelectedOptionImage": "My configuration: %{componentTitle} %{optionTitle}"
   }
 }

package/src/App/Modules/Creator/Components/Option/__snapshots__/index.test.js.snap

@@ -323,6 +323,7 @@ exports[`Option renders with TextInput 1`] = `
       class="Option-image-154"
     >
       <img
+        alt="ariaLabels.optionImage"
         src="/images/options/010002011000.png"
       />
     </div>
@@ -386,6 +387,7 @@ exports[`Option renders with an available image 1`] = `
       class="Option-image-8"
     >
       <img
+        alt="ariaLabels.optionImage"
         src="/images/options/010002011000.png"
       />
     </div>

package/src/App/Modules/Creator/Components/Option/index.js

@@ -295,7 +295,15 @@ const Option = ({ children, render, ...props }) => {
 
     const renderImage = () => {
         const src = getImageUrl(thumbnail);
-        return src && <img src={src} onError={setImageAvailability} />;
+        return (
+            src && (
+                <img
+                    src={src}
+                    alt={t('ariaLabels.optionImage', { title: option.title })}
+                    onError={setImageAvailability}
+                />
+            )
+        );
     };
 
     const renderNotAvailableImage = () => {

package/src/App/Modules/Creator/Components/Optiondetail/index.js

@@ -265,7 +265,16 @@ class Optiondetail extends React.Component {
     };
 
     render() {
-        const { LoadingComponent, options, show, onClose, details, classes, width } = this.props;
+        const {
+            LoadingComponent,
+            options,
+            show,
+            onClose,
+            details,
+            classes,
+            width,
+            optionclassification,
+        } = this.props;
         const { loading, loadingContainerHeight } = this.state;
         const showNav = isArray(options) && options.length > 1;
         const detailImage = details.detailImage;
@@ -389,7 +398,10 @@ class Optiondetail extends React.Component {
                                                         : classes.image
                                                 }
                                                 src={getImageUrl(detailImage)}
-                                                alt={details.title}
+                                                alt={T('ariaLabels.optionDetailsImage', {
+                                                    componentTitle: optionclassification.title,
+                                                    optionTitle: details.title,
+                                                })}
                                             />
                                         </div>
                                         {detailsContent}

package/src/App/Modules/Creator/Components/ProductPart/__snapshots__/index.test.js.snap

@@ -13,7 +13,9 @@ exports[`ProductPart renders with horizontal marker 1`] = `
     type="button"
   >
     <i
+      aria-label="ariaLabels.component"
       class="ProductPart-icon-21 horizontal"
+      role="img"
       style="background-image:url(/images/components/seat.png)"
     />
     <span
@@ -38,7 +40,9 @@ exports[`ProductPart renders with vertical marker 1`] = `
     type="button"
   >
     <i
+      aria-label="ariaLabels.component"
       class="ProductPart-icon-15 vertical"
+      role="img"
       style="background-image:url(/images/components/seat.png)"
     />
     <span
@@ -63,7 +67,9 @@ exports[`ProductPart renders without marker 1`] = `
     type="button"
   >
     <i
+      aria-label="ariaLabels.component"
       class="ProductPart-icon-3 vertical"
+      role="img"
       style="background-image:url(/images/components/seat.png)"
     />
     <span
@@ -88,7 +94,9 @@ exports[`ProductPart renders without marker when menu is closed 1`] = `
     type="button"
   >
     <i
+      aria-label="ariaLabels.component"
       class="ProductPart-icon-9 vertical"
+      role="img"
       style="background-image:url(/images/components/seat.png)"
     />
     <span

package/src/App/Modules/Creator/Components/ProductPart/index.js

@@ -7,6 +7,7 @@ import getImageUrl from 'App/Utils/getImageUrl';
 import customClassName from 'App/Utils/customClassName';
 import { Hyphenated } from 'Framework/i18n';
 import { withStyles } from '@material-ui/core/styles';
+import { t } from 'Framework/i18n';
 import AccessibleButton from '../../../../Shared/Components/AccessibleButton/AccessibleButton';
 
 const ProductPart = ({
@@ -41,6 +42,8 @@ const ProductPart = ({
             <i
                 className={`${classes.icon} ${direction}`}
                 style={imageUrl ? { backgroundImage: 'url(' + imageUrl + ')' } : {}}
+                aria-label={t('ariaLabels.component', { title: optionclassification.title })}
+                role="img"
             />
         );
     };

package/src/App/Modules/Designer/Components/ImageEditDialog/index.js

@@ -352,7 +352,6 @@ class ImageEditDialog extends React.Component {
         closePreviewDialog: PropTypes.func,
         continueClick: PropTypes.func,
         onChangeColor: PropTypes.func,
-        colorPickerEnabled: PropTypes.bool,
         imageColorizeElement: PropTypes.element,
         activeTabIndex: PropTypes.number,
         onActiveTabChange: PropTypes.func,
@@ -464,7 +463,6 @@ class ImageEditDialog extends React.Component {
             closePreviewDialog,
             continueClick,
             loaderComponent,
-            colorPickerEnabled,
             imageColorizeElement,
             activeTabIndex,
             width,
@@ -785,18 +783,16 @@ class ImageEditDialog extends React.Component {
                                             </RadioGroup>
                                         </AnalyticsWrapper>
                                     </FormControl>
-                                    {colorPickerEnabled && (
-                                        <Typography variant="caption" className={classes.colorizeCaption}>
-                                            {colorizeIcon ?? <Icon>colorize</Icon>}
-                                            <i>
-                                                {t(
-                                                    isWidthDown('xs', width)
-                                                        ? 'fileUpload.tabColorForRemove'
-                                                        : 'fileUpload.chooseColorForRemove'
-                                                )}
-                                            </i>
-                                        </Typography>
-                                    )}
+                                    <Typography variant="caption" className={classes.colorizeCaption}>
+                                        {colorizeIcon ?? <Icon>colorize</Icon>}
+                                        <i>
+                                            {t(
+                                                isWidthDown('xs', width)
+                                                    ? 'fileUpload.tabColorForRemove'
+                                                    : 'fileUpload.chooseColorForRemove'
+                                            )}
+                                        </i>
+                                    </Typography>
                                 </div>
                             )}
                             {activeTabIndex === 2 && (

package/src/App/Modules/Designer/Containers/AddGalleryImage.js

@@ -37,7 +37,7 @@ const getGalleryImages = createSelector(
         const host = getConf('network.host');
         return images.map(image => ({
             ...image,
-            url: `${host}${image.thumbUrl}`,
+            url: image.thumbUrl.startsWith('http') ? image.thumbUrl : `${host}${image.thumbUrl}`,
         }));
     }
 );

package/src/App/Modules/Designer/Containers/ImageEditDialog.js

@@ -51,7 +51,7 @@ import createSelector from 'Utils/Function/createSelector';
 import { getConf } from 'App/configuration';
 import { EventTypes } from 'App/Constant';
 import { expandVectorizeColorsMap, getClosestColorFromMap } from '../Utils/ImageEditUtils';
-import { getRasterURL, isOriginalVector } from '../Utils/Transformers';
+import { isOriginalVector } from '../Utils/Transformers';
 import { getClient, getConfigurator } from '../../../Reducers/Configurator/Selectors';
 
 const getOperationsFromState = state => {
@@ -318,7 +318,8 @@ export class ImageEditDialogContainer extends React.Component {
 
     updateOriginalPreview = async () => {
         const { image } = this.props;
-        const previewUrl = `${getConf('network.host')}${image.preview.url}`;
+        const url = get(image, 'preview.url', '');
+        const previewUrl = url.startsWith('http') ? url : `${getConf('network.host')}${url}`;
         const isSvg = previewUrl && /\.svg$/.test(previewUrl);
         if (isSvg) {
             const svgContent = await getSvgContent(previewUrl, true);
@@ -515,15 +516,11 @@ export class ImageEditDialogContainer extends React.Component {
     updatePreview = async (svgContent, options = {}) => {
         const { forceFetch = false } = options;
         const { image } = this.props;
-        const { activeTabIndex } = this.state;
 
         let preview = null;
         let originalImagePreview = null;
 
         let previewUrl = image?.preview?.url;
-        if (previewUrl && activeTabIndex === 1) {
-            previewUrl = getRasterURL(previewUrl);
-        }
 
         const isSvg = previewUrl && /\.svg$/.test(previewUrl);
 
@@ -532,7 +529,11 @@ export class ImageEditDialogContainer extends React.Component {
 
             if (updateSVG) {
                 if (!svgContent) {
-                    svgContent = await getSvgContent(image.preview.url, false, forceFetch);
+                    svgContent = await getSvgContent(
+                        image.preview.url,
+                        image.preview.url.startsWith('http'),
+                        forceFetch
+                    );
                 }
 
                 preview = applySvgContentOperations(
@@ -741,7 +742,6 @@ export class ImageEditDialogContainer extends React.Component {
                     closePreviewDialog={this.closePreviewDialog}
                     backgroundSelected={clipping}
                     preview={preview}
-                    colorPickerEnabled={!!clipping}
                     uploadDelayed={uploadDelayed}
                     continueButtonDisabled={continueButtonDisabled}
                     continueClick={this.continueClick}
@@ -825,7 +825,9 @@ const getUserImages = createSelector(
         return userImages.map(image => {
             return {
                 ...image,
-                url: `${host}${image.thumbnail.url}`,
+                url: image.thumbnail.url.startsWith('http')
+                    ? image.thumbnail.url
+                    : `${host}${image.thumbnail.url}`,
             };
         });
     }

package/src/App/Reducers/ImageGallery/Selectors.js

@@ -22,7 +22,7 @@ export const getPreviewUrlFromImageData = (preview, options = {}) => {
         return previewUrl;
     }
     const { host = getConf('network.host', '') } = options;
-    return `${host}${previewUrl}`;
+    return previewUrl.startsWith('http') ? previewUrl : `${host}${previewUrl}`;
 };
 
 export const isEditableVectorImage = preview => {

package/src/App/Screens/DesignerProductPreview/DesignerProductPreviewManager.js

@@ -55,7 +55,11 @@ const prepareImageData = (function createImageDataPreProcessor() {
 
         if (colorPreviewRequired) {
             // creating the color map, as it was added from the image edit dialog
-            const svgContent = await getSvgContent(imageData.preview.url, false, true);
+            const svgContent = await getSvgContent(
+                imageData.preview.url,
+                imageData.preview.url.startsWith('http'),
+                true
+            );
             const svgColors = getSvgColors(svgContent, designProductionMethod);
             const vectorizeColorsMap = createVectorizeColorsMap({}, svgColors);
             patchedImageData = {

package/src/App/Services/DesignDataService.js

@@ -228,9 +228,11 @@ export const calculateImageBrightness = image => {
     if (!image) {
         return;
     }
-
-    const imageUrl =
-        image.data && image.data.thumbnail ? `${getConf('network.host')}${image.data.thumbnail.url}` : null;
+    const thumbnail = get(image, 'data.thumbnail.url', null);
+    let imageUrl = null;
+    if (thumbnail) {
+        imageUrl = thumbnail.startsWith('http') ? thumbnail : `${getConf('network.host')}${thumbnail}`;
+    }
     const fuzzy = 0.1;
 
     return new Promise((resolve, reject) => {
@@ -1888,7 +1890,7 @@ export default class DesignDataService {
     }
 
     async getGalleryImageColors(url) {
-        const svgContent = await getSvgContent(url);
+        const svgContent = await getSvgContent(url, url.startsWith('http'));
 
         const designProductionMethod = getSelectedDesignProductionMethod(Services.store.state);
 
@@ -1896,7 +1898,7 @@ export default class DesignDataService {
     }
 
     async getSVGImageSize(url) {
-        const svgContent = await getSvgContent(url);
+        const svgContent = await getSvgContent(url, url.startsWith('http'));
         const svgTag = svgContent.match(/<svg[^>]+>/)?.[0];
         const width = svgContent.match(/width="([^"]+)"/)?.[1];
         const height = svgContent.match(/height="([^"]+)"/)?.[1];
@@ -2043,7 +2045,11 @@ export default class DesignDataService {
 
         if (isEditableVectorImage(preview)) {
             const designProductionMethod = getSelectedDesignProductionMethod(Services.store.state);
-            const svgContent = await getSvgContent(preview.url, false, !operationsMatching);
+            const svgContent = await getSvgContent(
+                preview.url,
+                preview.url.startsWith('http'),
+                !operationsMatching
+            );
             const svgColors = getSvgColors(svgContent, designProductionMethod);
 
             const vectorizeColorsMap = createVectorizeColorsMap(operations.vectorizeColorsMap, svgColors);

package/src/App/Services/DesignerService.js

@@ -48,7 +48,9 @@ function updateCanvasImageWithImageData(canvasImage, imageData) {
     return canvasImage.updateOptions(
         prepareImageObjectData({
             imageData,
-            src: `${getConf('network.host')}${imageData.preview.url}`,
+            src: imageData.preview.url?.startsWith('http')
+                ? imageData.preview.url
+                : `${getConf('network.host')}${imageData.preview.url}`,
             scaling: getCanvasImageScalingWithImageData(canvasImage, imageData),
         })
     );
@@ -184,7 +186,7 @@ export default class DesignerService {
             throw new Error('Preview image url is not specified!');
         }
         Services.store.dispatch(updateUploadDelayed(false));
-        return `${getConf('network.host')}${url}`;
+        return url.startsWith('http') ? url : `${getConf('network.host')}${url}`;
     }
 
     async addImageFromUrl(canvas, url, imageData, options = {}) {

package/src/App/Shared/Components/ConfigurationOverview/index.js

@@ -4,6 +4,7 @@ import Typography from '@material-ui/core/Typography';
 import PropTypes from 'prop-types';
 import get from 'lodash/get';
 import getImageUrl from '../../../Utils/getImageUrl';
+import { t } from 'Framework/i18n';
 
 const styles = () => ({
     tableWrapper: {
@@ -65,9 +66,19 @@ class ConfigurationOverview extends React.Component {
     render() {
         const { optionclassifications, classes } = this.props;
 
-        const renderImage = thumbnail => {
+        const renderImage = (thumbnail, componentTitle, optionTitle) => {
             const src = getImageUrl(thumbnail);
-            return src && <img src={src} />;
+            return (
+                src && (
+                    <img
+                        src={src}
+                        alt={t('ariaLabels.overViewSelectedOptionImage', {
+                            componentTitle: componentTitle,
+                            optionTitle: optionTitle,
+                        })}
+                    />
+                )
+            );
         };
 
         return (
@@ -88,14 +99,22 @@ class ConfigurationOverview extends React.Component {
                                                 <li className={classes.options}>
                                                     {option.amount !== 1 ? (
                                                         <div className={classes.image}>
-                                                            {renderImage(get(option, 'thumbnail', ''))}
+                                                            {renderImage(
+                                                                get(option, 'thumbnail', ''),
+                                                                optionclassification.title,
+                                                                option.title
+                                                            )}
                                                             <Typography className={classes.option}>
                                                                 {option.amount} x {option.title}
                                                             </Typography>
                                                         </div>
                                                     ) : (
                                                         <div className={classes.image}>
-                                                            {renderImage(get(option, 'thumbnail', ''))}
+                                                            {renderImage(
+                                                                get(option, 'thumbnail', ''),
+                                                                optionclassification.title,
+                                                                option.title
+                                                            )}
                                                             <Typography className={classes.option}>
                                                                 {option.title}
                                                             </Typography>