Importowanie obrazów za pomocą React

Wprowadzenie

Tworząc aplikacje internetowe za pomocą Reacta, zazwyczaj chcemy uwzględnić elementy wizualne, aby przyciągnąć zainteresowanie użytkowników. Te elementy wizualne mogą być dowolnym rodzajem obrazu, w tym JPG, PNG, SVG, GIF i wieloma innymi.

W tym artykule dowiemy się, jak importować obrazy za pomocą Reacta i zobaczymy różne sposoby, w jakie można to osiągnąć.

Obrazy zewnętrzne i obrazy lokalne to dwa typy obrazów, których chcemy używać w naszej aplikacji React. W tym artykule zajmujemy się głównie obrazami lokalnymi, ponieważ obrazy zewnętrzne nie wymagają ich importowania.

Obrazy zewnętrzne to obrazy, które były już hostowane zewnętrznie i każdy może uzyskać do nich dostęp za pośrednictwem adresu URL, podczas gdy obrazy lokalne to obrazy, które są dostępne tylko dla nas na naszym lokalnym komputerze lub w folderze projektu i które chcemy wykorzystać w naszej aplikacji.

Jak wyświetlać obrazy hostowane zewnętrznie

Zanim przejdziemy do importowania obrazów, ważne jest, aby zrozumieć, że obrazy hostowane w innym miejscu działają w taki sam sposób, w jaki zawsze używaliśmy obrazów w HTML – poprzez dodanie adresu URL do src atrybut img etykietka:

const App = () => {
   return (
      <div>
         <img src="https://reactjs.org/logo-og.png" alt="React Logo" />
      </div>
   );
};

Dowiedzmy się teraz, jak możemy importować (lokalne) obrazy za pomocą React!

Jak importować obrazy za pomocą React

Poza obrazami zewnętrznymi, sposób wykorzystania obrazów w React różni się znacznie od innych frameworków, a nawet HTML. Te obrazy muszą najpierw zostać zaimportowane do Reacta, zanim będą mogły zostać użyte w naszej aplikacji.

Można to osiągnąć na dwa sposoby: za pomocą import oświadczenie lub za pomocą require() funkcjonować. Omówimy oba podejścia.

Jak importować obrazy za pomocą React za pomocą importować Zestawienie sprzedaży

Ponieważ łatwiej jest czytać i rozumieć, import Instrukcja jest najczęściej używaną metodą importowania lokalnie przechowywanych obrazów w React. Obrazy są traktowane jako domyślne eksporty, a kiedy je importujemy, robimy to w taki sam sposób, jak importujemy komponenty. Odbywa się to poprzez określenie względnej ścieżki z pliku do importowanego obrazu:

import Logo from './images/react-logo.png';

const App = () => {
   return (
      <div>
         <img src={Logo} alt="React Logo" />
      </div>
   );
};

W powyższym kodzie nadal używamy img tag i src atrybut, ale tym razem src atrybut otrzymuje zmienną zamiast ciągu, który jest przekazywany za pomocą nawiasów klamrowych w JSX.

Uwaga: Możemy zaimportować tyle obrazów, ile chcemy, ale każdy obraz musi mieć unikalną nazwę w instrukcji import, w przeciwnym razie wygeneruje błąd.

Ważne jest, aby zrozumieć, jak określać i uzyskiwać względne ścieżki do plików; w przeciwnym razie mogą wystąpić błędy i błędy. W poprzednim przykładzie obraz został zapisany w /src/images.

Jak importować obrazy za pomocą Reacta za pomocą funkcji require()?

Połączenia require() function to funkcja Node.js używana do dołączania modułów zewnętrznych z plików innych niż bieżący plik. Działa w taki sam sposób jak import oświadczenie i pozwala nam dołączyć obrazy:

let Logo = require('./images/react-logo.png');

const App = () => {
   return (
      <div>
         <img src={Logo} alt="React Logo" />
      </div>
   );
};

Jedyną różnicą jest pierwsza linia, w której wymagaliśmy obrazu poprzez jego ścieżkę względną, a następnie zapisaliśmy go w zmiennej, do której uzyskaliśmy dostęp w img tag za pomocą nawiasów klamrowych.

Możemy również zdecydować się na zrobienie tego inline i uniknąć dodatkowej linii używanej do przypisania obrazu do zmiennej, ponieważ nie jest to obowiązkowe:

const App = () => {
   return (
      <div>
         <img src={require('./images/react-logo.png')} alt="React Logo" />
      </div>
   );
};

Wnioski

Dowiedzieliśmy się, jak importować lokalne obrazy za pomocą import oświadczenie i require() funkcji w tym artykule.