Реагистрировать фоновое руководство изображения – Как установить фоновое изображение с встроенным стилем CSS

Автор оригинала: FreeCodeCamp Community Member.

Есть четыре способа установить Фоновое изображение Свойство стиля с использованием React Inline CSS.

Этот учебник покажет вам все четыре метода, с образцами кода для каждого.

Как установить фоновое изображение в реакции с использованием внешнего URL

Если ваше изображение находится где-то онлайн, вы можете установить фоновое изображение вашего элемента, поместив такое URL:

function App() {
  return (
    

      Hello World
    
  );
}

Код выше будет представлять один

Как установить фоновое изображение в реакции с вашей папки/SRC

Если вы загрузите ваше приложение, используя приложение CORECTE RACT и имейте свое изображение внутри SRC/ Папка, вы можете Импорт Изображение сначала, а затем поместите его в качестве фона вашего элемента:

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

function App() {
  return (
    

      Hello World
    
  );
}

export default App;

Когда вы запускаете NPM начать Команда, Rect покажет «Не удалось запустить ошибку» и остановить сборку, когда изображение не найдено:

Таким образом, вы не будете отображать никаких сломанных ссылок изображений в вашем веб-приложении. В коде выше, значение Фон .Image Установлено с помощью строки шаблона, которая позволяет вам встраивать выражения JavaScript.

Как установить фоновое изображение в реакции с использованием относительного метода URL

публично/ Папка в приложении CREATE RACT может использоваться для добавления статических активов в ваше приложение React. Любые файлы, которые вы помещаете внутри папки, будут доступны онлайн.

Если вы положите image.png Файл внутри публично/ Папка, вы можете получить доступ к нему в <Ваш хост-адрес>/iimage.png Отказ При работе реагируют на вашем локальном компьютере, изображение должно быть в http://localhost: 3000/image.png Отказ

Затем вы можете назначить URL относительно вашего адреса хоста, чтобы установить фоновое изображение. Вот пример:

  Hello World

Установив путь URL к /image.png Как пример выше, браузер будет искать фоновое изображение на <Ваш хост-адрес>/iimage.png Отказ

Вы также можете создать еще одну папку внутри публично/ Если вы хотите организовать свои изображения в папки. Например:

Не забудьте настроить Фон .Image Значение для URL (/img/image.png) Если вы решите создать папку.

Как установить фоновое изображение в реакции с использованием метода абсолютного URL

Вы также можете включить абсолютный URL, используя Create React App’s Public_url Переменная среды, как это:

  Hello World

Когда вы запускаете это на локальном компьютере, React Screpts обрабатывают значение Public_url стоимость. Когда вы запустите его локально, он будет выглядеть как относительный URL вместо абсолютного URL:

Абсолютный URL будет замечен только при развертывании реагирования в производственное приложение позже.

Как установить фоновое изображение с дополнительными свойствами

Если вы хотите настроить фоновое изображение дальше, вы можете сделать это, добавив дополнительные свойства после Фон .Image Отказ Вот пример:

  Hello World

Установленные выше свойств добавят Фон-повторение: нет-повтора и Ширина: 250px вместе с Фоновое изображение Стиль к

Спасибо за чтение, и я надеюсь, что вы нашли эту статью полезную. Если у вас есть какие-либо вопросы, вы можете Найди меня в Twitter Отказ У меня время от времени я расскажу о некоторых кратких советах разработчиков. 🙂.