Como definir uma imagem de fundo com os estilos React Inline

286

Estou tentando acessar uma imagem estática para usar em uma backgroundImagepropriedade embutida no React. Infelizmente, fiquei sem saber como fazer isso.

Geralmente, achei que você fez o seguinte:

import Background from '../images/background_image.png';

var sectionStyle = {
  width: "100%",
  height: "400px",
  backgroundImage: "url(" + { Background } + ")"
};

class Section extends Component {
  render() {
    return (
      <section style={ sectionStyle }>
      </section>
    );
  }
}

Isso funciona para <img>tags. Alguém pode explicar a diferença entre os dois?

Exemplo:

<img src={ Background } /> funciona muito bem.

Obrigado!

javascript reactjs Kris
fonte

472

As chaves dentro da propriedade backgroundImage estão incorretas.

Provavelmente você está usando o webpack junto com o carregador de arquivos de imagem, portanto, o Background já deve ser uma String: backgroundImage: "url(" + Background + ")"

Você também pode usar os modelos de string ES6 como abaixo para obter o mesmo efeito:

backgroundImage: `url(${Background})`

rgommezz
fonte

Eu deveria ter acrescentado isso à minha pergunta. Eu tenho um conjunto de largura e altura (100% / 400px, respectivamente). A questão que surge é devido à forma como reagir lida com imagens estáticas, acredito.

Kris

Se um escapar da '(", ')' e espaço em branco caracteres na variável de fundo antes de concatenação como por w3.org/TR/CSS2/syndata.html#value-def-uri ?

qbolec

49

Sintaxe completa deve ficar assim:style={{backgroundImage: "url(" + Background + ")"}}

mike

2

apenas para expandir o comentário de @ mike, você precisa de chaves duplas, porque uma é para o React entrar no modo JS e outra é para denotar o novo objeto.

Ciprian Tomoiagă

Estou recebendo o erro 'Seção' é definido, mas nunca usado 'depois de fornecer este plano de importação a partir de' ./background.jpg '; var sectionStyle = {width: "100%", height: "400px", backgroundImage: url(${Background})}; classe Section estende o Componente {render () {return (<section style = {sectionStyle}> </section>); }}

Pavanan MS

40

Se você estiver usando o ES5 -

backgroundImage: "url(" + Background + ")"

Se você estiver usando o ES6 -

backgroundImage: `url(${Background})`

Basicamente, remover chaves desnecessárias ao adicionar valor aos trabalhos da propriedade backgroundImage funcionará.

Rushikesh Bharad
fonte

2

Para mim no ES6, foi backgroundImage: `url("${Background}")`porque o seu exemplo do ES6 não funcionou para mim.

S ..

37

Estilo embutido para definir qualquer imagem em tela cheia:

style={{  
  backgroundImage: "url(" + "https://images.pexels.com/photos/34153/pexels-photo.jpg?auto=compress&cs=tinysrgb&h=350" + ")",
  backgroundPosition: 'center',
  backgroundSize: 'cover',
  backgroundRepeat: 'no-repeat'
}}

Hitesh Sahu
fonte

17

Você também pode trazer a imagem para o componente usando a require()função

Observe os dois conjuntos de colchetes . O primeiro conjunto é para entrar no modo de reação e o segundo é para indicar o objeto

Complicado
fonte

E se o caminho da imagem for um URL da Web em vez de um caminho local? Algo comohttps://images.com/myimage.png

Aminu Kano

3

Ok, eu entendo, ao usar URL baseado na web. Eu deveria apenas escreverurl(https://images.com/myimage.png)

Aminu Kano

4

Você pode usar literais de modelo (incluídos com back-tick: `...`) em vez de backgroundImagepropriedades como esta:

backgroundImage: `url(${Background})`

Fawaz Abdulla
fonte

3

tente isto:

style={{ backgroundImage: `url(require("path/image.ext"))` }}

Hamza Khan
fonte

2

Para mim, o que funcionou é tê-lo assim

style={{ backgroundImage: `url(${require("./resources/img/banners/3.jpg")})` }}

brianokinyi
fonte

-1

Você pode tentar usimg

backgroundImage: url(process.env.PUBLIC_URL + "/      assets/image_location")

Jamilur Rahman
fonte

Isso não é recomendado, pois evitará que o webpack conheça o ativo. Isso terminará com uma falta de cache se o aplicativo de reação for aberto offline.

Thomas Kekeisen 13/03

Como definir uma imagem de fundo com os estilos React Inline

Respostas: