Neste artigo você vai aprender a como colocar uma imagem de background dinâmica em React, utilizando variáveis
Fala programador(a), beleza? Bora aprender mais sobre imagens e estilos inline no React!
A melhor maneira de adicionar uma imagem de background com o React é utilizando as template strings
Que com os back ticks deixam uma string dinâmica
Veja um exemplo:
backgroundImage: `url(${imageUrl})`
No caso acima temos a propriedade de background image utilizando uma variável para colocar a imagem
A variável imageUrl deve conter o caminho até a imagem
Aplicado a uma tag teremos:
<div style={{background: `url(${imageUrl})`}}></div>
O que dá o mesmo resultado do exemplo anterior, mas aqui estamos utilizando no meio do JSX
Com estas duas abordagens você já deve conseguir o que precisa 🙂
Basta escolher qual delas é melhor para o seu projeto
Conclusão
Neste artigo você viu como imagem de background dinâmica em React
Utilizamos a propriedade backgroundImage com o valor de dentro da propriedade url dinâmico, com uma variável
A forma mais fácil de atingir isso é com o recurso de template strings
Confira nossos cursos gratuitos no Youtube, com vídeos todos os dias! Se inscreva e ative o sininho para receber as notificações e aprender mais ainda sobre desenvolvimento web!
Veja também nosso catálogo de cursos na Udemy, todos com exercícios e projetos práticos, nas mais diversas tecnologias. O link acima contém um cupom de desconto para os cursos!