How to add different images to a styled component in js react

Question

I'm trying use an images as an header for a div in JavaScript react and add media queries to be more responsive for mobile devices, I'm using styled components to style them, so far it work if I use just one image but if I uncomment out the other images it breaks is there a way around this

the styled components

   const Storycontentcardcontainer =styled.div`
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 80vw;
    margin: 10px auto;
    position: relative;
    text-align:center;
`

const Storycontentcard = styled.div`
    overflow: auto;
    background: -webkit-linear-gradient(#C7D3DC,#5B798E);  
    background: -moz-linear-gradient(#C7D3DC,#5B798E);  
    background: -o-linear-gradient(#C7D3DC,#5B798E);  
    background: linear-gradient(#C7D3DC,#5B798E);
    width: 70vw;
    margin: 10px;
    height: 20%;
`
const Storycontentheader = styled.img`
    width: 40%;
    height: auto;

    @media screen and (max-width: 768px){
        width: 80%;
        height: auto;
    }
`
const Storycontent = styled.h3`
    font-size: large;
    margin-top: 1%;

    @media screen and (max-width: 768px){
        font-size: small;
    }
` 

and the jsx

  <Storycontentcardcontainer>
     <Storycontentcard>
        <Storycontentheader  src={s1} alt="Fuyuki singularity logo"></Storycontentheader>
                                <Storycontent>Survive through a destoried and burning city in japan where rouge Servants are on the run killing other Servants,
                                    any surving humans in the city.
                                </Storycontent>
         </Storycontentcard>
      </Storycontentcardcontainer>
                    <Storycontentcardcontainer>
                        <Storycontentcard>
                            <Storycontentheader src={s2} alt="Fuyuki singularity logo"></Storycontentheader>
                                <Storycontent>Survive through a destoried and burning city in japan where rouge Servants are on the run killing other Servants,
                                    any surving humans in the city.
                                </Storycontent>
                        </Storycontentcard>
                    </Storycontentcardcontainer>
                    <Storycontentcardcontainer>
                        <Storycontentcard>
                            <Storycontentheader src={s3} alt="Fuyuki singularity logo"></Storycontentheader>
                                <Storycontent>Survive through a destoried and burning city in japan where rouge Servants are on the run killing other Servants,
                                    any surving humans in the city.
                                </Storycontent>
                        </Storycontentcard>
                    </Storycontentcardcontainer>
                    <Storycontentcardcontainer>
                        <Storycontentcard>
                            <Storycontentheader src={s4} alt="Fuyuki singularity logo"></Storycontentheader>
                                <Storycontent>Survive through a destoried and burning city in japan where rouge Servants are on the run killing other Servants,
                                    any surving humans in the city.
                                </Storycontent>
                        </Storycontentcard>
                    </Storycontentcardcontainer>
                    <Storycontentcardcontainer>
                        <Storycontentcard>
                            <Storycontentheader src={s5} alt="Fuyuki singularity logo"> </Storycontentheader>
                                <Storycontent>Survive through a destoried and burning city in japan where rouge Servants are on the run killing other Servants,
                                    any surving humans in the city.
                                </Storycontent>
                        </Storycontentcard>
                    </Storycontentcardcontainer>
                    <Storycontentcardcontainer>
                        <Storycontentcard>
                            <Storycontentheader src={s6} alt="Fuyuki singularity logo"></Storycontentheader>
                                <Storycontent>Survive through a destoried and burning city in japan where rouge Servants are on the run killing other Servants,
                                    any surving humans in the city.
                                </Storycontent>
                        </Storycontentcard>
                    </Storycontentcardcontainer>
                    <Storycontentcardcontainer>
                        <Storycontentcard>
                            <Storycontentheader src={s7} alt="Fuyuki singularity logo"></Storycontentheader>
                                <Storycontent>Survive through a destoried and burning city in japan where rouge Servants are on the run killing other Servants,
                                    any surving humans in the city.
                                </Storycontent>
                        </Storycontentcard>
                    </Storycontentcardcontainer>
                    <Storycontentcardcontainer>
                        <Storycontentcard>
                            <Storycontentheader src={s8} alt="Fuyuki singularity logo"></Storycontentheader>
                                <Storycontent>Survive through a destoried and burning city in japan where rouge Servants are on the run killing other Servants,
                                    any surving humans in the city.
                                </Storycontent>
                        </Storycontentcard>
                    </Storycontentcardcontainer>
                    <Storycontentcardcontainer>
                        <Storycontentcard>
                            <Storycontentheader src={s9} alt="Fuyuki singularity logo"></Storycontentheader>
                                <Storycontent>Survive through a destoried and burning city in japan where rouge Servants are on the run killing other Servants,
                                    any surving humans in the city.
                                </Storycontent>
                        </Storycontentcard>
                    </Storycontentcardcontainer>

  

Answer 1

Try to pass images as a props.

// your component...
import Image from '../images/desktop.png'
import ImageMobile from '../images/mobile.png'
import {Wrapper} from '/* path */'

const Component = () => {
  return (
    <>
      <Wrapper image={Image} mobile={ImageMobile}>
      
      // your code
      
      </Wrapper>
    </>
  )
}

export default Component

Your Styled Component:

import styled from 'styled-components'

export const Wrapper = styled.div`
  margin: 0 auto;
  width: 100vw;
  // background Image props
  background-image: url(${(props) => props.image});
  min-height: 100vh;
  background-size: cover;

  @media (max-width: 768px) {
    // background for mobile
    background-image: url(${(props) => props.mobile});
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
`