Imagem de background não aparece em componente React com CSS

Olá, pessoal!

Estou com um problema no meu projeto React: tenho um componente Banner que recebe uma prop imagem e usa essa prop para definir a imagem de fundo via backgroundImage inline style.

O código básico do componente é esse:

import '../../componentes/Banner/estiloBanner.css';

function Banner({ imagem }) {
return (
<div
className="banner"
style={{ backgroundImage: url('/imagens/banner-${imagem}.png') }}
>
);
}

export default Banner;

E o CSS está assim (em estiloBanner.css):

.banner {
width: 100%;
height: 300px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}

Minha imagem está em /public/imagens/banner-home.png.

Quando eu uso o componente assim:

O fundo não aparece. Já verifiquei:

O arquivo da imagem está na pasta correta (public/imagens/banner-home.png)

A URL /imagens/banner-home.png funciona quando acesso direto pelo navegador

O CSS está sendo carregado (a altura e largura do banner estão aplicadas)

O estilo inline backgroundImage está definido no elemento (inspecionei no DevTools)

Não há erros no console e o React compila normalmente.

Alguém já passou por isso? Alguma dica do que pode estar faltando ou como debugar melhor?

Obrigado!

Oi, Rafael! Como vai?

O problema está no valor de backgroundImage: faltam as crases para interpolar a prop e o valor precisa ser uma string CSS do tipo 'url(...)'. Além disso, o caminho do arquivo vindo de /public deve iniciar com /.

Ajuste seu código assim:


// Banner.jsx
import '../../componentes/Banner/estiloBanner.css';

function Banner({ imagem }) {
  return (
    <div
      className="banner"
      style={{ backgroundImage: `url(/imagens/banner-${imagem}.png)` }}
    />
  );
}

export default Banner;

// Uso:
<Banner imagem="home" />  // carrega /public/imagens/banner-home.png

Ainda, se quiser evitar style inline e manter dinâmico, use uma className condicional:


// Banner.jsx (alternativa sem inline)
import '../../componentes/Banner/estiloBanner.css';

function Banner({ imagem }) {
  const classe = `banner banner--${imagem}`;
  return <div className={classe} />;
}

export default Banner;

/* estiloBanner.css */
.banner {
  width: 100%;
  height: 300px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.banner--home { background-image: url('/imagens/banner-home.png'); }
.banner--contato { background-image: url('/imagens/banner-contato.png'); }

Também recomendo que verifique estes pontos rápidos de debug:


1) Inspecione o elemento e confira em "Computed" se background-image exibe uma URL valida.
2) Aba Network: recarregue a pagina e veja se /imagens/banner-home.png retorna 200 (e nao 404).
3) Confirme que o arquivo esta em /public/imagens/ e que a prop <Banner imagem="home" /> bate com o nome do arquivo.
4) Em Vite/CRA, arquivos em /public/ devem ser referenciados com caminho absoluto: /imagens/...

Espero ter ajudado. Conte com o apoio do Fórum na sua jornada. Fico à disposição.

Abraços e bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado

Garanta sua matrícula hoje e ganhe + 2 meses grátis