There are few steps if we dont use "create-react-app",([email protected]) first we should install file-loader as devDedepencie,next step is to add rule in webpack.config
{
test: /\.(png|jpe?g|gif)$/i,
loader: 'file-loader',
}, then in our src directory we should make file called declarationFiles.d.ts(for example) and register modules inside
declare module '*.jpg';
declare module '*.png';,then restart dev-server. After these steps we can import and use images like in code bellow
import React from 'react';
import image from './img1.png';
import './helloWorld.scss';
const HelloWorld = () => (
<>
<h1 className="main">React TypeScript Starter</h1>
<img src={image} alt="some example image" />
</>
);
export default HelloWorld;Works in typescript and also in javacript,just change extension from .ts to .js
Cheers.