He estado tratando de configurar la imagen como imagen de fondo desde la carpeta pública en componentes con estilo. lo intenté así
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; `;y entonces
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; `;¿Cómo puedo importarlo? Gracias por adelantado
Lo he buscado en Google, pero todavía no tengo nada como tú.
Así que decidí usar accesorios:
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' } /> ) }Le recomiendo que tenga el archivo jsconfig configurado con la ruta base
{ "compilerOptions": { "jsx": "react", "baseUrl": "./", } } Y luego acceda a su imagen simplemente import img from "public/images/whatever.png
Prueba esto, me está funcionando.
import bgImage from "../images/background.png"; const Wrapper = styled.div` background-image: url(${bgImage}); `