diff --git a/src/PrivacyProtection/PrivacyProtection.jsx b/src/PrivacyProtection/PrivacyProtection.jsx index 0c35bb3..e06e971 100644 --- a/src/PrivacyProtection/PrivacyProtection.jsx +++ b/src/PrivacyProtection/PrivacyProtection.jsx @@ -4,8 +4,8 @@ import { Placeholder } from 'semantic-ui-react'; import cookie from 'react-cookie'; import { Button, Checkbox } from 'semantic-ui-react'; import config from '@plone/volto/registry'; - import '../css/embed-styles.css'; +import { createImageUrl } from './helpers'; const key = (domain_key) => `accept-${domain_key}`; @@ -31,6 +31,13 @@ function canShow(domain_key) { export default ({ children, data = {}, block, ...rest }) => { const { dataprotection = {} } = data; const { background_image: bgImg } = dataprotection; + const [image, setImage] = React.useState(null); + + React.useEffect(() => { + if (bgImg) { + setImage(createImageUrl(bgImg)); + } + }, [bgImg]); const [visible, setVisibility] = useState(false); const defaultShow = canShow(dataprotection.privacy_cookie_key); @@ -56,7 +63,7 @@ export default ({ children, data = {}, block, ...rest }) => { style={ bgImg ? { - backgroundImage: `url(data:${bgImg['content-type']};${bgImg.encoding},${bgImg.data})`, + backgroundImage: `url(${image})`, backgroundRepeat: 'no-repeat', backgroundPosition: 'center', backgroundSize: 'cover', diff --git a/src/PrivacyProtection/helpers.js b/src/PrivacyProtection/helpers.js new file mode 100644 index 0000000..ab0e818 --- /dev/null +++ b/src/PrivacyProtection/helpers.js @@ -0,0 +1,11 @@ +export function createImageUrl(result) { + const decoded = window.atob(result.data); + const byteNumbers = new Array(decoded.length); + for (let i = 0; i < decoded.length; i++) { + byteNumbers[i] = decoded.charCodeAt(i); + } + const byteArray = new Uint8Array(byteNumbers); + + const image = new Blob([byteArray], { type: result['content-type'] }); + return URL.createObjectURL(image); +}