React.js styled-components importando imágenes y usándolas como fondo div

Solución:

Debe importar imágenes de la siguiente manera (asumiendo que tiene un paquete web configurado para importar activos multimedia).

import myImage from '../../assets/image.png';

/* ... */

const HeaderImage = styled.div`
  background-image: url($myImage);
`;

EDITAR: esta respuesta se editó después de que se actualizó el título de la pregunta, debido a que el título de la pregunta era engañoso.

Usando la imagen como propiedad CSS de la imagen de fondo:

import LogoSrc from './assets/logo.png';

/* ... */

const LogoDiv = styled.div`
  background-image: url($LogoSrc);
  /* width and height should be set otherwise container will have either have them as 0 or grow depending on its contents */
`;

/* ... */

<LogoDiv />

Forma normal de importar y usar imágenes:

import LogoSrc from './assets/logo.png';

/* ... */

const Logo = styled.img`
    width: 30px;
    height: 30px;
    margin: 15px;
`;

/* ... inside the render or return of your component ... */

<Logo src=LogoSrc />

EDITAR 2: Como referencia, hay otra forma de usar componentes con estilo, que se usa principalmente cuando usa componentes que ya importa (es decir, componentes ant-design de otra biblioteca de componentes) o en el caso de componentes que no funcionan usando styled._cp_name_ notación.

NOTA: los componentes deben ser compatibles con los componentes de estilo.

Imagine que exportaría Logo en un archivo y lo importaría en otro archivo de componente:

const Logo = styled.img`
    width: 30px;
    height: 30px;
    margin: 15px;
`;

export default Logo;

Luego, en el archivo donde lo importaría, podría agregar más estilos de la siguiente manera:

import Logo from '../components/Logo';

const L = styled(Logo)`
   border: 1px dashed black;
`;

/* ... then inside render or return ... */
<L />

import logo from 'public/images/logo.jpg';

/* ... */

const HeaderImg = styled.img.attrs(
  src: `$logo`
)`
width: 50px;
height: 30px;
`;

---

---

Utiliza Nuestro Buscador