I have been trying to set the image to background-image from the public folder in styled-components. I tried so
import styled from "styled-components";
import Background from 'process.env.PUBLIC_URL + /images/background.svg'
export const HomeContainer = styled.section`
height: 100vh;
max-width: 100vw;
background-image: url(${Background});
background-repeat: no-repeat;
background-size: cover;
`;
and so
import styled from "styled-components";
export const HomeContainer = styled.section`
height: 100vh;
max-width: 100vw;
background-image: url('process.env.PUBLIC_URL + /images/background.svg');
background-repeat: no-repeat;
background-size: cover;
`;
How can I import it? Thanks in advance
I've googled it but still have nothing just like you.
So I decided to use props:
import styled from "styled-components";
const HomeContainer = styled.section`
height: 100vh;
max-width: 100vw;
background-image: url(${ ({Background}) => Background });
background-repeat: no-repeat;
background-size: cover;
`;
const App = () => {
return (
<HomeContainer Background={ process.env.PUBLIC_URL + 'where your image at' } />
)
}
I highly recommend you to have jsconfig file configured with base path
{
"compilerOptions": {
"jsx": "react",
"baseUrl": "./",
}
}
And then access your image by simply import img from "public/images/whatever.png
Try this, it's working for me.
import bgImage from "../images/background.png";
const Wrapper = styled.div`
background-image: url(${bgImage});
`