Tutorial de imagem de segundo plano no React – Como definir backgroundImage com estilo em linha em CSS

Artigo original: React Background Image Tutorial – How to Set backgroundImage with Inline CSS Style

Há quatro modos de definir uma propriedade de estilo backgroundImage usando CSS em linha com o React.

Este tutorial mostrará os quatro métodos, com exemplos de código para cada um.

Como definir uma imagem de segundo plano no React usando um URL externo

Se a sua imagem estiver localizada em outro lugar on-line, você pode definir a imagem de segundo plano de seu elemento inserindo o URL assim:

function App() {
  return (
    <div style={{ 
      backgroundImage: `url("https://via.placeholder.com/500")` 
    }}>
      Hello World
    </div>
  );
}

O código acima fará a renderização de um único elemento <div> com o estilo background-image: url(https://via.placeholder.com/500) aplicado a ele.

Como definir uma imagem de segundo plano no React a partir de sua pasta /src

Se você fizer o bootstraping de sua aplicação usando Create React App e se sua imagem estiver dentro da pasta src/, você pode fazer o import da imagem primeiro e colocá-la como segundo plano de seu elemento:

import React from "react";
import background from "./img/placeholder.png";

function App() {
  return (
    <div style={{ backgroundImage: `url(${background})` }}>
      Hello World
    </div>
  );
}

export default App;

Ao executar o comando npm start, o React mostrará uma mensagem dizendo "Failed to compile" (não foi possível compilar) e interromperá a build quando a imagem não for encontrada:

Deste modo, você não mostrará links quebrados de imagens na sua aplicação para a web. No código acima, o valor de backgroundImage é definido usando uma template string, que permite a você incorporar expressões em JavaScript.

Como definir uma imagem de segundo plano no React usando o método de URL relativo

A pasta public/ no Create React App pode ser usada para adicionar itens estáticos à sua aplicação no React. Todos os arquivos colocados nessa pasta ficarão acessíveis on-line.

Se você colocar um arquivo image.png na pasta public/, poderá acessá-lo em <seu endereço de host>/image.png. Ao executar o React no seu computador local, a imagem deverá estar em http://localhost:3000/image.png.

Então, você pode atribuir o URL relativo ao endereço do seu host para definir a imagem de segundo plano. Veja aqui um exemplo:

<div style={{ backgroundImage: "url(/image.png)" }}>
  Hello World
</div>

Ao definir o caminho do URL como /image.png, como no exemplo acima, o navegador buscará a imagem de segundo plano em <seu endereço de host>/image.png.

Você também poderá criar outra pasta dentro de public/ se quiser organizar suas imagens em pastas. Por exemplo:

Não se esqueça de ajustar o valor de backgroundImage para url(/img/image.png) se decidir criar a pasta.

Como definir uma imagem de segundo plano no React usando o método de URL absoluto

Você também pode incluir o URL absoluto usando a variável de ambiente PUBLIC_URL do  Create React App assim:

<div style={{ 
  backgroundImage: `url(${process.env.PUBLIC_URL + '/image.png'})` 
}}>
  Hello World
</div>

Ao executar isso no seu computador local, os scripts do React lidarão com o valor de PUBLIC_URL. Quando você executar o programa no local, ela terá a aparência de um URL relativo em vez de um URL absoluto:

O URL absoluto será visto apenas quando você fizer o deploy do React na aplicação de produção mais tarde.

Como definir uma imagem de segundo plano com propriedades adicionais

Se quiser personalizar ainda mais a imagem de segundo plano, você pode fazer isso colocando propriedades adicionais após backgroundImage. Aqui temos um exemplo:

<div style={{ 
  backgroundImage: `url(${process.env.PUBLIC_URL + '/image.png'})`,
  backgroundRepeat: 'no-repeat',
  width:'250px' 
}}>
  Hello World
</div>

As propriedades definidas acima, background-repeat: no-repeat e width: 250px serão incorporadas ao estilo background-image do elemento <div>.

Obrigado por sua leitura. Espero que tenha achado útil este artigo. Se tiver perguntas, pode encontrar o autor no Twitter. Ele também compartilhará algumas pequenas dicas de desenvolvedor de vez em quando. 🙂