В каждом отдельном проекте, как правило, требуется добавить изображение в проект React, чтобы показать что-то или представить график и создать красивую страницу для вашей аудитории.
Добавление изображения с помощью React очень просто и быстро, вот пример:
import React from "react";
import imageToAdd from "./../assets/images/logo.png";
function YourComponent() {
return <img src={imageToAdd} alt="Image" />;
}
export default YourComponent;
Это работает как шарм в проекте React, собранном с помощью CRA или Vite.
Но если ваш проект имеет пользовательский бандлер, созданный с помощью Typescript + Webpack, то с кодом выше вы получите эту ошибку:
Cannot find module './../assets/images/logo.png'
Когда я впервые увидел эту ошибку, я подумал: «Это ошибка!», но после поиска и хорошего понимания typescript я обнаружил, что получение ошибки — это правильное поведение.
По умолчанию в typescript разрешение модуля разрешает импорт, используя только файлы с расширением: .ts .tsx или .d.ts, и именно по этой причине в предыдущем случае модуль не мог быть найден.
Итак, как мы можем решить эту проблему?
Чтобы решить эту проблему, обычно необходимо:
-
добавить каталог types в корень проекта
-
создать внутри этой директории файл index.d.ts со следующим содержимым
declare module "*.jpg";
declare module "*.png";
N.B. расширение зависит от типа файла, который вы добавляете.
- установите зависимость file-loader с помощью npm, yarn или pnpm
npm install --save-dev file-loader
- обновите конфигурационный файл webpack для использования модуля file-loader следующим образом
...
{ test: /\.(png|jp(e*)g|svg|gif)$/, use: ['file-loader'], }
...
После этого вы можете запустить свое приложение, сборка пройдет успешно, и ваше изображение появится! 🎩
