contiago-toolbar/app/components/ImagePreview/index.js

One of the options for outputting content from contiago xml-server

import React from 'react';
import PropTypes from 'prop-types';
import { convertImagePathToUrl } from 'utils/imagesUtil';
import Copyright from 'components/Copyright';
import Container from './Container';
import Image from './Image';
import Close from './Close';


const ImagePreview = ({ image, onClosePreviewImage }) => {
  const src = convertImagePathToUrl(image.path);
  return (
    <Container>
      <Close onClick={() => onClosePreviewImage({})} />
      <Image src={src}>
        <img src={src ? src.replace(/'/g, '') : null} alt={image.name} style={{ visibility: 'hidden', width: '100%', height: 'auto' }} />
        <Copyright copyright={image.copyright} />
      </Image>
    </Container>
  );
};

ImagePreview.propTypes = {
  image: PropTypes.object,
  onClosePreviewImage: PropTypes.func,
};

export default ImagePreview;