diff --git a/image.d.ts b/image.d.ts
new file mode 100644
index 0000000..66b113c
--- /dev/null
+++ b/image.d.ts
@@ -0,0 +1,20 @@
+declare module '*.png' {
+    const content: string;
+    export default content;
+}
+declare module '*.svg' {
+    const content: string;
+    export default content;
+}
+declare module '*.jpg' {
+    const content: string;
+    export default content;
+}
+declare module '*.jpeg' {
+    const content: string;
+    export default content;
+}
+declare module '*.gif' {
+    const content: string;
+    export default content;
+}
diff --git a/package-lock.json b/package-lock.json
index fe1268b..a9c7ec4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,6 +16,7 @@
                 "@types/react": "^18.0.26",
                 "@types/react-dom": "^18.0.10",
                 "css-loader": "^6.7.3",
+                "file-loader": "^6.2.0",
                 "html-webpack-plugin": "^5.5.0",
                 "sass": "^1.57.1",
                 "sass-loader": "^13.2.0",
@@ -674,6 +675,15 @@
             "integrity": "sha512-x+VAiMRL6UPkx+kudNvxTl6hB2XNNCG2r+7wixVfIYwu/2HKRXimwQyaumLjMveWvT2Hkd/cAJw+QBMfJ/EKVw==",
             "dev": true
         },
+        "node_modules/big.js": {
+            "version": "5.2.2",
+            "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
+            "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==",
+            "dev": true,
+            "engines": {
+                "node": "*"
+            }
+        },
         "node_modules/binary-extensions": {
             "version": "2.2.0",
             "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
@@ -1296,6 +1306,15 @@
             "integrity": "sha512-M8WEXFuKXMYMVr45fo8mq0wUrrJHheiKZf6BArTKk9ZBYCKJEOU5H8cdWgDT+qCVZf7Na4lVUaZsA+h6uA9+PA==",
             "dev": true
         },
+        "node_modules/emojis-list": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
+            "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==",
+            "dev": true,
+            "engines": {
+                "node": ">= 4"
+            }
+        },
         "node_modules/encodeurl": {
             "version": "1.0.2",
             "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
@@ -1531,6 +1550,26 @@
                 "node": ">=0.8.0"
             }
         },
+        "node_modules/file-loader": {
+            "version": "6.2.0",
+            "resolved": "https://registry.npmjs.org/file-loader/-/file-loader-6.2.0.tgz",
+            "integrity": "sha512-qo3glqyTa61Ytg4u73GultjHGjdRyig3tG6lPtyX/jOEJvHif9uB0/OCI2Kif6ctF3caQTW2G5gym21oAsI4pw==",
+            "dev": true,
+            "dependencies": {
+                "loader-utils": "^2.0.0",
+                "schema-utils": "^3.0.0"
+            },
+            "engines": {
+                "node": ">= 10.13.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/webpack"
+            },
+            "peerDependencies": {
+                "webpack": "^4.0.0 || ^5.0.0"
+            }
+        },
         "node_modules/fill-range": {
             "version": "7.0.1",
             "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
@@ -2209,6 +2248,18 @@
             "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
             "dev": true
         },
+        "node_modules/json5": {
+            "version": "2.2.3",
+            "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
+            "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
+            "dev": true,
+            "bin": {
+                "json5": "lib/cli.js"
+            },
+            "engines": {
+                "node": ">=6"
+            }
+        },
         "node_modules/kind-of": {
             "version": "6.0.3",
             "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
@@ -2236,6 +2287,20 @@
                 "node": ">=6.11.5"
             }
         },
+        "node_modules/loader-utils": {
+            "version": "2.0.4",
+            "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz",
+            "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
+            "dev": true,
+            "dependencies": {
+                "big.js": "^5.2.2",
+                "emojis-list": "^3.0.0",
+                "json5": "^2.1.2"
+            },
+            "engines": {
+                "node": ">=8.9.0"
+            }
+        },
         "node_modules/locate-path": {
             "version": "5.0.0",
             "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
@@ -4805,6 +4870,12 @@
             "integrity": "sha512-x+VAiMRL6UPkx+kudNvxTl6hB2XNNCG2r+7wixVfIYwu/2HKRXimwQyaumLjMveWvT2Hkd/cAJw+QBMfJ/EKVw==",
             "dev": true
         },
+        "big.js": {
+            "version": "5.2.2",
+            "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
+            "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==",
+            "dev": true
+        },
         "binary-extensions": {
             "version": "2.2.0",
             "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
@@ -5276,6 +5347,12 @@
             "integrity": "sha512-M8WEXFuKXMYMVr45fo8mq0wUrrJHheiKZf6BArTKk9ZBYCKJEOU5H8cdWgDT+qCVZf7Na4lVUaZsA+h6uA9+PA==",
             "dev": true
         },
+        "emojis-list": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
+            "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==",
+            "dev": true
+        },
         "encodeurl": {
             "version": "1.0.2",
             "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
@@ -5464,6 +5541,16 @@
                 "websocket-driver": ">=0.5.1"
             }
         },
+        "file-loader": {
+            "version": "6.2.0",
+            "resolved": "https://registry.npmjs.org/file-loader/-/file-loader-6.2.0.tgz",
+            "integrity": "sha512-qo3glqyTa61Ytg4u73GultjHGjdRyig3tG6lPtyX/jOEJvHif9uB0/OCI2Kif6ctF3caQTW2G5gym21oAsI4pw==",
+            "dev": true,
+            "requires": {
+                "loader-utils": "^2.0.0",
+                "schema-utils": "^3.0.0"
+            }
+        },
         "fill-range": {
             "version": "7.0.1",
             "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
@@ -5960,6 +6047,12 @@
             "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
             "dev": true
         },
+        "json5": {
+            "version": "2.2.3",
+            "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
+            "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
+            "dev": true
+        },
         "kind-of": {
             "version": "6.0.3",
             "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
@@ -5978,6 +6071,17 @@
             "integrity": "sha512-3R/1M+yS3j5ou80Me59j7F9IMs4PXs3VqRrm0TU3AbKPxlmpoY1TNscJV/oGJXo8qCatFGTfDbY6W6ipGOYXfg==",
             "dev": true
         },
+        "loader-utils": {
+            "version": "2.0.4",
+            "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz",
+            "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
+            "dev": true,
+            "requires": {
+                "big.js": "^5.2.2",
+                "emojis-list": "^3.0.0",
+                "json5": "^2.1.2"
+            }
+        },
         "locate-path": {
             "version": "5.0.0",
             "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
diff --git a/package.json b/package.json
index c2f4e45..ff887ae 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
         "@types/react": "^18.0.26",
         "@types/react-dom": "^18.0.10",
         "css-loader": "^6.7.3",
+        "file-loader": "^6.2.0",
         "html-webpack-plugin": "^5.5.0",
         "sass": "^1.57.1",
         "sass-loader": "^13.2.0",
diff --git a/src/img/mushroom-cat.png b/src/img/mushroom-cat.png
new file mode 100644
index 0000000..dd9a365
Binary files /dev/null and b/src/img/mushroom-cat.png differ
diff --git a/src/index.scss b/src/index.scss
index e5e98d1..5bc36ac 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -1,4 +1,5 @@
 body {
+    font-family: sans-serif;
     background-color: #000000;
     color: #ffffff;
 }
diff --git a/src/index.tsx b/src/index.tsx
index 49797a1..07f37ff 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -5,10 +5,19 @@ import { doWork } from './module';
 
 import './index.scss';
 
+import MushroomCatImage from './img/mushroom-cat.png';
+
+import Portrait from './portrait';
+
 const App: FC = () => {
     const num = doWork();
     console.log('work gave', num);
-    return <div>Hello, Webpack</div>;
+    return (
+        <div>
+            <div>Hello, Webpack</div>
+            <Portrait src={MushroomCatImage} />
+        </div>
+    );
 };
 
 const main = document.querySelector('main');
diff --git a/src/portrait/index.tsx b/src/portrait/index.tsx
new file mode 100644
index 0000000..edcbf09
--- /dev/null
+++ b/src/portrait/index.tsx
@@ -0,0 +1,15 @@
+import { FC } from 'react';
+
+interface PortraitProps {
+    src: string;
+}
+const Portrait: FC<PortraitProps> = (props: PortraitProps) => {
+    const { src } = props;
+    return (
+        <div>
+            Portrait <img src={src} />
+        </div>
+    );
+};
+
+export default Portrait;
diff --git a/tsconfig.json b/tsconfig.json
index 94438bf..e9567e9 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -20,5 +20,12 @@
         "useUnknownInCatchVariables": true,
         "alwaysStrict": true,
         "skipLibCheck": true
-    }
+    },
+    "exclude": [
+        "node_modules"
+    ],
+    "include": [
+        "src",
+        "image.d.ts"
+    ]
 }
diff --git a/webpack.config.js b/webpack.config.js
index 19eebda..225948e 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -67,8 +67,8 @@ module.exports = {
             },
             // image support with `import Image from './image.png'`
             {
-                test: /\.(png|svg|jpg|jpeg|gif)$/i,
-                type: 'asset/resource',
+                test: /\.(png|svg|jpe?g|gif)$/i,
+                use: [{ loader: 'file-loader' }],
             },
         ],
     },