Оригінальна публікація: React Background Image Tutorial – How to Set backgroundImage with Inline CSS Style

Існує чотири способи встановити властивість стилю backgroundImage за допомогою вбудованого CSS у React.

Цей посібник покаже вам усі чотири методи зі зразками коду для кожного.

Як встановити фонове зображення в React за допомогою зовнішньої URL-адреси

Якщо ваше зображення знаходиться десь в інтернеті, ви можете встановити фонове зображення свого елемента, розмістивши URL-адресу таким чином:

function App() {
  return (
    <div style={{ 
      backgroundImage: `url("https://via.placeholder.com/500")` 
    }}>
      Hello World
    </div>
  );
}
Встановлення фонового зображення за допомогою зовнішньої URL-адреси

Наведений вище код відтворить єдиний елемент <div> із застосованим до нього стилем background-image: url(https://via.placeholder.com/500).

Як встановити фонове зображення в React з вашої папки /src

Якщо ви завантажуєте свою програму за допомогою Create React App і маєте своє зображення в папці src/, ви можете спочатку виконати import зображення, а потім розмістити його як фон свого елемента:

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

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

export default App;
Встановлення фонового зображення за допомогою імпортованого зображення

Коли ви виконаєте команду npm start, React покаже помилку «Failed to Compile» і зупинить збірку, якщо зображення не знайдено:

React-failed-to-compile-image
Помилка збірки. Зображення не знайдено.

Таким чином ви не відображатимете пошкоджені посилання на зображення у своєму вебзастосунку. У наведеному вище коді значення backgroundImage встановлюється за допомогою рядка шаблону, що дозволяє вставляти вирази JavaScript.

Як встановити фонове зображення в React за допомогою методу відносної URL-адреси

Папку public/ можна використовувати для додавання статичних ресурсів до програми React. Будь-які файли, які ви поміщаєте в папку, будуть доступними в інтернеті.

Якщо ви помістите файл image.png у папку public/, ви зможете отримати доступ до нього за адресою <your host address>/image.png. Під час запуску React на локальному комп’ютері зображення має бути за адресою http://localhost:3000/image.png.

Потім ви можете призначити URL-адресу відносно адреси хосту, щоб встановити фонове зображення. Ось приклад:

<div style={{ backgroundImage: "url(/image.png)" }}>
  Hello World
</div>
Встановлення фонового зображення за допомогою відносної URL-адреси

Встановивши URL-шлях до /image.png як у прикладі вище, вебпереглядач шукатиме фонове зображення за <your host address>/image.png.

Ви також можете створити іншу папку всередині public/, якщо хочете впорядкувати зображення в папки. Наприклад:

Screen-Shot-2020-12-14-at-20.18.30
Створення папки img/ всередині папки public/

Не забудьте змінити значення backgroundImage на url(/img/image.png), якщо вирішите створити папку.

Як встановити фонове зображення в React за допомогою методу абсолютної URL-адреси

Ви також можете включити абсолютну URL-адресу, використовуючи змінну середовища PUBLIC_URL у Create React App, ось так:

<div style={{ 
  backgroundImage: `url(${process.env.PUBLIC_URL + '/image.png'})` 
}}>
  Hello World
</div>
Встановлення фонового зображення за допомогою абсолютної URL-адреси

Коли ви запустите це на своєму локальному комп’ютері, сценарії React оброблятимуть значення PUBLIC_URL. Коли ви запускаєте його локально, він виглядатиме як відносна URL-адреса, а не як абсолютна URL-адреса:

absolute-url-background-image-1
Абсолютна URL-адреса зображення не відображається на локальному комп’ютері

Абсолютну URL-адресу можна буде побачити лише під час розгортання React у робочій програмі пізніше.

Як встановити фонове зображення з додатковими властивостями

Якщо ви хочете додатково налаштувати фонове зображення, це можна зробити, додавши додаткові властивості після backgroundImage. Ось приклад:


<div style={{ 
  backgroundImage: `url(${process.env.PUBLIC_URL + '/image.png'})`,
  backgroundRepeat: 'no-repeat',
  width:'250px' 
}}>
  Hello World
</div>
Встановлення фонового зображення з додатковими властивостями

Встановлені вище властивості додаватимуть властивості background-repeat: no-repeat та width: 250px разом із background-image до елементу <div>.

Дякую, що прочитали, і сподіваюся, ця стаття була для вас корисною. Якщо у вас є запитання, ви можете знайти мене в твіттері. Час від часу я також буду ділитися деякими короткими порадами для розробників. 🙂