Не могу заиспортить картинку png react webpack
Файл лоадеров
import type webpack from 'webpack';
import MiniCssExtractPlugin from 'mini-css-extract-plugin';
import path from 'path';
import { type BuildOptions } from './types/config';
export function buildLoaders({ isDev }: BuildOptions): webpack.RuleSetRule[] {
const svgLoader = {
test: /\.svg$/,
use: ['@svgr/webpack'],
};
const babelLoader = {
test: /\.(js|jsx|tsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
plugins: [
[
'i18next-extract',
{
locales: ['ru', 'en'],
keyAsDefaultValue: true,
},
],
],
},
},
};
const cssLoader = {
test: /\.s[ac]ss$/i,
use: [
isDev ? 'style-loader' : MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
modules: {
auto: (resPath: string) => Boolean(resPath.includes('.module.')),
localIdentName: isDev
? '[path][name]__[local]--[hash:base64:5]'
: '[hash:base64:8]',
},
},
},
'sass-loader',
],
};
const tsLoader = {
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/,
};
const fileLoader = {
test: /\.(png|svg|jpg|gif)$/,
use: [{
loader: 'file-loader',
options: {
name: (f: any) => {
const dirNameInsideAssets = path.relative(path.join(__dirname, 'src'), path.dirname(f));
return `${dirNameInsideAssets}/[name].[ext]`;
},
},
}],
};
return [
fileLoader,
svgLoader,
babelLoader,
tsLoader,
cssLoader,
];
}
Файл, где хочу картинку использовать
import React, { useState } from 'react';
import { Card } from 'shared/ui/Card/Card';
import { classNames } from 'shared/lib/classNames/classNames';
import { useTranslation } from 'react-i18next';
import { CustomInput } from 'shared/ui/CustomInput/CustomInput';
import { Logo } from 'shared/ui/Logo/Logo';
import { CustomButton } from 'shared/ui/Button/CustomButton';
import cls from './AuthorizationPage.module.scss';
import './dark.png';
const AuthorizationPage = () => {
const { t } = useTranslation();
const [login, setLogin] = useState('');
const [password, setPassword] = useState('');
return (
<div className={classNames(cls.Authorization, {}, [])}>
<div className={classNames(cls.AuthorizationContent, {}, [])}>
<Card className={classNames(cls.authorizationCard, {}, [])}>
<Logo className={classNames(cls.logo, {}, [])} />
<CustomInput
formControlClassName={classNames(cls.customInput, {}, [])}
label="LOGIN"
required
value={login}
onChange={(event) => setLogin(event.target.value)}
/>
<CustomInput
formControlClassName={classNames(cls.customInput, {}, [])}
label="PASS"
required
type="password"
value={password}
onChange={(event) => setPassword(event.target.value)}
/>
<CustomButton
className={classNames(cls.signInButton, {}, [])}
>
Sign In
</CustomButton>
</Card>
<img src="dark.png" alt="" />
</div>
</div>
);
};
export default AuthorizationPage;
Файл с картинкой для начала положил рядом с файлом, где хочу использовать бьет ошибку
ERROR in ./src/pages/AuthorizationPage/ui/AuthorizationPage.tsx 10:0-20
Module not found: Error: Can't resolve 'file-loader' in 'C:\Users\user\Desktop\work\JS\traidy_movements_ui_react'