Dialog PaperProps Background url doesnt work with local path

Question

I needed to change background images of Dialogs .ı found a solutıon for overriding PaperProps . Here the solutıon that i used : React JS - How to add style in PaperProps of Dialog (material-ui)

The weird thing is ,if i use a websites url there is no problem .But with a local path "../../images/image.png" it causes problem. I will use dialog with 5 differant pages and all of them will be differant backgrounds.

I tried with a lot of differant images.

render() {
    const {
      fullScreen,
      children,
      showcaseText,
      showcaseDescription,

      noCloseButtonNeeded
    } = this.props;
    return (
      <Dialog id="dialog-id"



    PaperProps= {{
      style: {
        backgroundImage:'url("https://images.unsplash.com/photo-1515879218367-8466d910aaa4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80")'

       }
   }}

        fullScreen={fullScreen}
        open={this.state.open}
        onClose={this.handleClose}
        aria-labelledby='responsive-dialog-title'

      >

        <DialogTitle

          onClose={this.handleClose}
          noCloseButtonNeeded={noCloseButtonNeeded}
        >
          <img id="checkout-brand-desktop"
            src={require('../../images/uAppLogo.png')}
            height='30px'
            width='130px'
            alt={'logo'}
          />
          <img id="checkout-brand-mobile"
            src={require('../../images/NomadCardLogo-W@2x.png')}
            height='30px'
            width='130px'
            alt={'logo'}
          />
        </DialogTitle>
        <div className='showcase'>
          <h1 className='showcase__title'>{showcaseText}</h1>
          <div className='showcase__description'>{showcaseDescription}</div>
          {children}
        </div>

      </Dialog>
    );
  }

Possible duplicate of [How to use images in css with Webpack](https://stackoverflow.com/questions/35369419/how-to-use-images-in-css-with-webpack) — Aprillion, Aug 08 '19 at 19:34

score 0 · Accepted Answer · answered Aug 10 '19 at 11:23

I solved my problem with;




    PaperProps= {{
      style: {
        backgroundImage:'url("https://images.unsplash.com/photo-1515879218367-8466d910aaa4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80")'

       }
   }}

        fullScreen={fullScreen}
        open={this.state.open}
        onClose={this.handleClose}
        aria-labelledby='my own labels'

      >

I used aria-labelledby like an id. I created my own labels , then ı used this labels in my scss files.

div[aria-labelledby="my labels"]{
background-image:url("#")
}

Dialog PaperProps Background url doesnt work with local path

1 Answers1