Оригінальна публікація: React Background Image Tutorial – How to Set backgroundImage with Inline CSS Style
Існує чотири способи встановити властивість стилю backgroundImage
за допомогою вбудованого CSS у React.
Цей посібник покаже вам усі чотири методи зі зразками коду для кожного.
Як встановити фонове зображення в React за допомогою зовнішньої URL-адреси
Якщо ваше зображення знаходиться десь в інтернеті, ви можете встановити фонове зображення свого елемента, розмістивши URL-адресу таким чином:
Наведений вище код відтворить єдиний елемент <div>
із застосованим до нього стилем background-image: url(https://via.placeholder.com/500)
.
Як встановити фонове зображення в React з вашої папки /src
Якщо ви завантажуєте свою програму за допомогою Create React App і маєте своє зображення в папці src/
, ви можете спочатку виконати import
зображення, а потім розмістити його як фон свого елемента:
Коли ви виконаєте команду npm start
, React покаже помилку «Failed to Compile» і зупинить збірку, якщо зображення не знайдено:
Таким чином ви не відображатимете пошкоджені посилання на зображення у своєму вебзастосунку. У наведеному вище коді значення backgroundImage
встановлюється за допомогою рядка шаблону, що дозволяє вставляти вирази JavaScript.
Як встановити фонове зображення в React за допомогою методу відносної URL-адреси
Папку public/
можна використовувати для додавання статичних ресурсів до програми React. Будь-які файли, які ви поміщаєте в папку, будуть доступними в інтернеті.
Якщо ви помістите файл image.png
у папку public/
, ви зможете отримати доступ до нього за адресою <your host address>/image.png
. Під час запуску React на локальному комп’ютері зображення має бути за адресою http://localhost:3000/image.png
.
Потім ви можете призначити URL-адресу відносно адреси хосту, щоб встановити фонове зображення. Ось приклад:
Встановивши URL-шлях до /image.png
як у прикладі вище, вебпереглядач шукатиме фонове зображення за <your host address>/image.png
.
Ви також можете створити іншу папку всередині public/
, якщо хочете впорядкувати зображення в папки. Наприклад:
Не забудьте змінити значення backgroundImage
на url(/img/image.png)
, якщо вирішите створити папку.
Як встановити фонове зображення в React за допомогою методу абсолютної URL-адреси
Ви також можете включити абсолютну URL-адресу, використовуючи змінну середовища PUBLIC_URL
у Create React App, ось так:
Коли ви запустите це на своєму локальному комп’ютері, сценарії React оброблятимуть значення PUBLIC_URL
. Коли ви запускаєте його локально, він виглядатиме як відносна URL-адреса, а не як абсолютна URL-адреса:
Абсолютну URL-адресу можна буде побачити лише під час розгортання React у робочій програмі пізніше.
Як встановити фонове зображення з додатковими властивостями
Якщо ви хочете додатково налаштувати фонове зображення, це можна зробити, додавши додаткові властивості після backgroundImage
. Ось приклад:
Встановлені вище властивості додаватимуть властивості background-repeat: no-repeat
та width: 250px
разом із background-image
до елементу <div>
.
Дякую, що прочитали, і сподіваюся, ця стаття була для вас корисною. Якщо у вас є запитання, ви можете знайти мене в твіттері. Час від часу я також буду ділитися деякими короткими порадами для розробників. 🙂