Вступ
Розробляючи веб-додатки за допомогою React, ми зазвичай хочемо включити візуальні елементи, щоб зацікавити користувачів. Ці візуальні елементи можуть бути зображеннями будь-якого типу, включаючи JPG, PNG, SVG, GIF та багато інших.
У цій статті ми дізнаємося, як імпортувати зображення за допомогою React, і побачимо різні способи, як цього можна досягти.
Зовнішні зображення та локальні зображення – це два типи зображень, які ми хочемо використовувати в нашій програмі React. У цій статті ми в першу чергу стурбовані локальними зображеннями, оскільки зовнішні зображення не вимагають від нас їх імпортувати.
Зовнішні зображення – це зображення, які вже розміщено на зовнішньому хостингу та доступ до яких може отримати будь-хто за допомогою URL-адреси, тоді як локальні зображення – це зображення, які доступні нам лише на локальному комп’ютері чи в папці проекту та які ми хочемо використовувати в нашій програмі.
Як відображати зображення, розміщені на зовнішньому хості
Перш ніж перейти до того, як імпортувати зображення, важливо зрозуміти, що зображення, розміщені в інших місцях, працюють так само, як ми завжди використовували зображення в HTML – додаючи URL-адресу до src атрибут img тег:
const App = () => {
return (
<div>
<img src="https://reactjs.org/logo-og.png" alt="React Logo" />
</div>
);
};
Давайте тепер дізнаємося, як ми можемо імпортувати (локальні) зображення за допомогою React!
Як імпортувати зображення за допомогою React
Окрім зовнішніх зображень, спосіб використання зображень у React значно відрізняється від інших фреймворків або навіть HTML. Ці зображення потрібно спочатку імпортувати в React, перш ніж їх можна буде використовувати в нашій програмі.
Це можна зробити двома способами: за допомогою import або за допомогою require() функція. Ми розглянемо обидва підходи.
Як імпортувати зображення за допомогою React за допомогою імпорт Заява
Тому що його легше читати і розуміти import оператор є найбільш часто використовуваним методом імпорту локально збережених зображень у React. Зображення обробляються як експорт за замовчуванням, і коли ми їх імпортуємо, ми робимо це так само, як імпортуємо компоненти. Це робиться шляхом вказівки відносного шляху від файлу до зображення, яке ми імпортуємо:
import Logo from './images/react-logo.png';
const App = () => {
return (
<div>
<img src={Logo} alt="React Logo" />
</div>
);
};
У коді вище ми все ще використовуємо img тег і src атрибут, але цього разу src атрибут отримує змінну, а не рядок, який передається за допомогою фігурних дужок у JSX.
Примітка: Ми можемо імпортувати скільки завгодно зображень, але кожне зображення повинно мати унікальне ім’я в операторі імпорту, інакше виникне помилка.
Важливо розуміти, як вказати та отримати відносні шляхи для файлів; інакше можуть виникнути помилки та помилки. У попередньому прикладі зображення було збережено в /src/images.
Як імпортувати зображення за допомогою React за допомогою функції require().
Команда require() функція — це функція Node.js, яка використовується для включення зовнішніх модулів із файлів, відмінних від поточного файлу. Він працює так само, як і import і дозволяє нам включити зображення:
let Logo = require('./images/react-logo.png');
const App = () => {
return (
<div>
<img src={Logo} alt="React Logo" />
</div>
);
};
Єдина відмінність полягає в першому рядку, де ми вимагали зображення через його відносний шлях, а потім зберігали його в змінній, до якої ми отримали доступ у img тег через фігурні дужки.
Ми також можемо вирішити зробити це вбудовано та уникнути додаткового рядка, який використовується для призначення зображення змінній, оскільки це не є обов’язковим:
const App = () => {
return (
<div>
<img src={require('./images/react-logo.png')} alt="React Logo" />
</div>
);
};
Висновок
Ми навчилися імпортувати локальні зображення за допомогою import заяву та require() функції в цій статті.
