Există patru moduri de a seta un backgroundImage proprietate stil folosind CSS inline al lui React.

Acest tutorial vă va arăta toate cele patru metode, cu mostre de cod pentru fiecare.

Cum să setați o imagine de fundal în React folosind o adresă URL externă

Dacă imaginea dvs. este situată undeva online, puteți seta imaginea de fundal a elementului dvs. plasând adresa URL astfel:

function App() {
  return (
    <div style={{ 
      backgroundImage: `url("https://via.placeholder.com/500")` 
    }}>
      Hello World
    </div>
  );
}
Setarea Reactează imaginea de fundal cu adresa URL externă

Codul de mai sus va reda un singur <div> element cu stilul background-image: url(https://via.placeholder.com/500) aplicat în el.

Cum să setați o imagine de fundal în React din folderul / src

Dacă porniți aplicația folosind Create React App și aveți imaginea în interiorul src/ dosar, puteți import mai întâi imaginea și apoi plasați-o ca fundal al elementului:

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

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

export default App;
Setarea imaginii de fundal utilizând imaginea importată

Când rulați npm start comandă, React va afișa o eroare „Nu s-a putut compila” și va opri compilarea atunci când imaginea nu este găsită:

Tutorial pentru imaginea de fundal React Cum se seteaza
React nu a reușit să compileze. Imaginea nu este găsită.

În acest fel, nu veți afișa nicio legătură cu imagini rupte în aplicația dvs. web. În codul de mai sus, valoarea backgroundImage este setat folosind un șablon șablon, care vă permite să încorporați expresii JavaScript.

Cum să setați o imagine de fundal în React folosind metoda URL relativă

public/ folderul din Creați aplicația React poate fi utilizat pentru a adăuga active statice în aplicația dvs. React. Toate fișierele pe care le introduceți în dosar vor fi accesibile online.

Dacă puneți un image.png fișier în interiorul fișierului public/ folder, îl puteți accesa de la <your host address>/image.png. Când rulați React pe computerul dvs. local, imaginea ar trebui să fie la http://localhost:3000/image.png.

Apoi, puteți atribui adresa URL relativă la adresa gazdei dvs. pentru a seta imaginea de fundal. Iată un exemplu:

<div style={{ backgroundImage: "url(/image.png)" }}>
  Hello World
</div>
Setarea imaginii de fundal cu adresa URL relativă

Prin setarea căii URL la /image.png la fel ca exemplul de mai sus, browserul va căuta imaginea de fundal la <your host address>/image.png.

De asemenea, puteți crea un alt folder în interior public/ dacă doriți să vă organizați imaginile în dosare. De exemplu:

1611708604 341 Tutorial pentru imaginea de fundal React Cum se seteaza
Crearea unui img / folder în public / folder

Nu uitați să reglați backgroundImage valoare pentru url(/img/image.png) dacă decideți să creați dosarul.

Cum să setați o imagine de fundal în React folosind metoda URL-ului absolut

De asemenea, puteți include adresa URL absolută utilizând aplicațiile Create React PUBLIC_URL variabilă de mediu ca aceasta:

<div style={{ 
  backgroundImage: `url(${process.env.PUBLIC_URL + '/image.png'})` 
}}>
  Hello World
</div>
Setarea imaginii de fundal cu adresa URL absolută

Când rulați acest lucru pe computerul dvs. local, scripturile React vor gestiona valoarea fișierului PUBLIC_URL valoare. Când îl rulați local, va arăta ca o adresă URL relativă în loc de o adresă URL absolută:

1611708604 88 Tutorial pentru imaginea de fundal React Cum se seteaza
Adresa URL absolută a imaginii nu este afișată pe computerul local

Adresa URL absolută va fi văzută numai atunci când implementați mai târziu React în aplicația de producție.

Cum să setați o imagine de fundal cu proprietăți suplimentare

Dacă doriți să personalizați în continuare imaginea de fundal, puteți face acest lucru adăugând proprietăți suplimentare după backgroundImage. Iată un exemplu:


<div style={{ 
  backgroundImage: `url(${process.env.PUBLIC_URL + '/image.png'})`,
  backgroundRepeat: 'no-repeat',
  width:'250px' 
}}>
  Hello World
</div>
Setarea imaginii de fundal cu proprietăți suplimentare

Proprietățile setate mai sus se vor adăuga background-repeat: no-repeat și width: 250px împreună cu background-image stil la <div> element.

Vă mulțumesc că ați citit și sper că ați găsit util acest articol. Dacă aveți întrebări, puteți găsește-mă pe Twitter. Voi împărtăși din când în când și câteva sfaturi scurte pentru dezvoltatori. 🙂