React. Реакт. Тестовая задача 012. Встраивание изображений

---

Встраивание изображений

Разберёмся, что здесь происходит:

  <script src="/js/react/react.development.js"></script>
  <script src="/js/react/react-dom.development.js"></script>
  <script src="/js/react/babel.min.js"></script>
  ...
  <script type="text/babel">
    const { useState, createElement } = React;
    const { createRoot } = ReactDOM;

function Child() {
      return (
        <div>
          <img src="/fs/react/task012/logo.png" alt="Логотип" />

        </div>
      );
    }

    const root = ReactDOM.createRoot(document.getElementById('root'));
    root.render(<Child />);

Встраивание изображений

Изображения в React могут подключаться через стили. Но, помимо этого, их можно импортировать напрямую и подключать в src-атрибут:

В этом случае сборщик подставит нужный путь до файла. А если файл маленький, то добавит его содержимое прямо в код. Формат такого файла будет base64, поэтому отдельный запрос для изображения не понадобится.