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!