React

Como colocar uma imagem de background dinâmica em React.js

5 de maio de 2022

Como colocar uma imagem de background dinâmica em React.js

Neste artigo você vai aprender a como colocar uma imagem de background dinâmica em React, utilizando variáveis

imagem de background dinâmica em React capa

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!

Subscribe
Notify of
guest
0 Comentários
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x