Введение

При разработке веб-приложений с помощью 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() function — это функция 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() функция в этой статье.