How to display backgroung image once it's assigned as constant using styled components

Question

I want to display background image on full size of the parent component, this image is assigned to const "image", parent is Dialog from Material UI. Below is the code which I have now and not working. How should I implement it ?

const image =
        '../../../../../../shared/src/lib/assets/images/logo/SVG/nevomo_logo_orange.svg';
    return (
        <div>
            <StyledLogo onClick={handleClickOpen} />
            <StyledDialog
                onClose={handleClose}
                aria-labelledby="alert-picture-zoom-in"
                open={open}
                sx={{ backgroundImage: { image } }}
            >
                <StyledImageContent>sss</StyledImageContent>
                <StyledCloseIcon onClick={handleClose} />
            </StyledDialog>

export const StyledDialog = styled(Dialog)`
    & .MuiDialog-paper {
        overflow: unset;
        height: 50rem;
        width: 46.4rem;
        border: 0.4rem solid #ffffff;
        border-radius: unset;
        background-image: ${(props) => props.image};
    }
`;

thanks a lot !

Answer 1

This should help

import styled from 'styled-components';
import img from 'your path to image';

export const StyledDialog = styled(Dialog)`
    background-image: url(${img});
    width: 100%;

    & .MuiDialog-paper {
        overflow: unset;
        height: 50rem;
        width: 46.4rem;
        border: 0.4rem solid #fff;
        border-radius: unset;
        background-image: ${(props) => props.image};
    }
`;