TypeScriptにおける画像のimportができない

概要

現在、React,TypeScriptを用いた開発を行っています。
そこで、画像のインポートをしようとimport img from '../path'の様にするとエラーが発生しました。
自分なりに調べてモジュールの型定義やtsconfigの設定を変更いたしましたが、エラーが消えず。
const img = require('../path')の様にすれば解決いたしましたが、どうにも気持ち悪く、importする方法が気になっている所存です。
どなたか解決方法のご教授お願いいたします。

エラーの内容

モジュール '../../img/board.png' が見つかりません。ts(2307)

ディレクトリ構成

.
├── dev.js
├── dist
│   ├── assets
│   ├── index.html
│   └── main.js
├── node_modules
├── package.json
├── src
│   ├── App.tsx
│   ├── actions
│   ├── components
│   ├── config
│   ├── containers
│   ├── css
│   ├── img
│   ├── index.tsx
│   ├── lottie
│   ├── models
│   ├── reducers
│   ├── store
│   └── utils
├── tsconfig.json
├── types
│   └── import-png.d.ts
├── webpack.config.js
├── yarn-error.log
└── yarn.lock

該当のコード

// src/containers/Top/AuthTop.jsx

import logo from '../../img/topLogo.png'

// 型定義ファイル

declare module "*.png" {
    const value: any
    export default value
}

// tsconfig.json

{
    "compileOnSave": true,
    "compilerOptions": {
        "rootDir": "./",
        "baseUrl": "./",
        "strict": true,
        "alwaysStrict": false,
        "noImplicitAny": false,
        "noImplicitThis": false,
        "skipLibCheck": true,
        "sourceMap": true,
        "target": "es5",
        "module": "esnext",
        "jsx": "react",
        "moduleResolution": "node",
        "lib": [
            "esnext",
            "dom"
        ],
        "allowJs": true,
        "removeComments": true,
        "downlevelIteration": true,
        "outDir": "./dist",
        "allowSyntheticDefaultImports": true,
        "strictNullChecks": true,
        "resolveJsonModule": true,
        "esModuleInterop": true,
        "noUnusedParameters": true,
        "noUnusedLocals": true,
        "paths": {
            "import-png": [
                "types/import-png"
            ]
        },
        "typeRoots": [
            "types",
            "node_modules/@types"
        ],
    },
    "include": [
        "src"
    ]
}

追記

webpackの設定です。

// webpack.config.json

require('@babel/register');
module.exports = require('./dev');

// dev.js

import path from 'path'

const src = path.resolve(__dirname, 'src')
const dist = path.resolve(__dirname, 'dist')

const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');

module.exports = {
    mode: "development",
    entry: ['@babel/polyfill', src + '/index.tsx'],
    output: {
        path: dist,
        filename: "main.js"
    },
    plugins: [
        new HardSourceWebpackPlugin()
    ],
    module: {
        rules: [
            {
                // css
                test: /.css$/,
                exclude: {
                    include: /node_modules/,
                    // quill.js
                    exclude: /node_modules/react-quill//
                },
                use: [
                    'style-loader',
                    {
                        loader: 'css-loader',
                        options: {
                            url: false,
                        },
                    },
                ],
            },
            {
                // js
                test: /.js$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: 'babel-loader',
                        options: {
                            presets: [['@babel/preset-env', { modules: false }]]
                        }
                    }
                ]
            },
            {
                // tsx
                test: /.ts?$/,
                use: "ts-loader",
            },
            {
                // tsx
                test: /.tsx?$/,
                use: "ts-loader",
            },
            {
                // image
                test: /.(jpg|JPG|jpeg|png|PING|gif|mp3|svg|ttf|woff2|woff|eot)$/,
                use: {
                    loader: "file-loader",
                    options: {
                        name: "[name].[ext]",
                        outputPath: "assets/img",
                        publicPath: path => "/assets/img/" + path
                    }
                }
            }
        ]
    },
    resolve: {
        extensions: [".ts", ".tsx", ".js", ".json"]
    },
    devServer: {
        contentBase: './dist',
        host: '0.0.0.0',
        port: 3000,
        inline: true,
        historyApiFallback: true
    }
};

// dist/index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <link rel="shortcut icon" href="./assets/img/logo.png">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta name="keywords" content="メモ,付箋,ブレインストーミング,共同編集">
    <script defer src="/main.js"></script>
    <title>THINK!</title>
</head>
<body>
    <div id="root"></div>
</body>
</html>

oec

2020/03/16 02:16

該当のtsコードは、html側から読み込まれているものですか？

退会済みユーザー

2020/03/16 03:31

webpackでバンドルし、それをHTMLで読み込んでいます！追記いたしましたので、是非ご一読ください！

退会済みユーザー

2020/03/16 03:32

tsconfigのbase_urlが間違っているとか…？

oec

2020/03/16 03:42

ファイルのパスは、URLからたどることになるので（例：http://localhos:3000/src/img/test.png) 相対パスで参照したい場合は、サーバー側でstaticフォルダを見れるように設定してあげる必要があります。そうするとそのフォルダの中身はHTMLから相対パスで見れるようになります。 ↑↑という原因かと思っていたのですがもしかしたらtsconfigのpath設定で解決したり？ https://www.agent-grow.com/self20percent/2019/03/11/typescript-paths-work-careful/