Can't get a buttons background image to display-CodePudding

Tried searching for an answer on this but didn't find anything that worked.

Im working in React, using styled-components.

Got a styles.js file that contains all my css for a component I'm working on. Problem is, I'm trying to put an image of a dice on a set of buttons. The buttons are used in the component as:

<Button></Button>

If I want to overwrite a particular buttons style, I have rules (as props I think?) in the same styles.js file. Here's what this specific problem button is:

// Style override for a Randomiser Button
${props => props.RANDButton && css`
background: transparent url('../Images/D20.png') no-repeat;

width: 50px;
height: 50px;

border: outset 1px;
border-radius: 0px;
`}

Here's the 'original' code that all buttons use unless overwritten:

//style(s) for a button
export const Button = styled.button`
  background-color: rgb(100,250,100);
  box-shadow: 2px 2px 3px black;
  color: black;

  border: outset;
  border-radius: 10px;
  
  padding: 5px;
  margin: 5px;
  text-align: Center;
  width: auto;
  
  font-weight: bolder;
  font-size: 1.5rem;
  font-variant: small-caps;
...
*Other css rules*
...
`;

Then, this specific button is used like so:

<Button RANDButton></Button>

Sorry, I can't recall the proper terminology for this method.

When I save, and the component re-renders, it doens't show the image

If I've missed something basic, please could someone point it out to me?

Thanks

CodePudding user response：

Issue was that images, unless explicity imported as:

import D20 from './Images/D20.png';

and then used as:

  background: url(${D20});

...will be minified and have their URL changed thanks to webpack.

Found answer here:

https://stackoverflow.com/a/56404570/2796017

CodePudding user response：

it's duplicate question , you can find the right answer in below link React.js styled-components importing images and using them as div background