Webpack 无法使用网页包文件加载程序加载图像

根据以下说明，我应该能够加载图像：

test: /\.(png|jpg|gif)$/,
use: [
  {
    loader: 'file-loader',
    options: {}  
  }
]

稍后通过：

import img from './file.png';

这是我的

webpack.config.js

：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
    module: {
        rules: [
            {
                test: /\.(png|jpg|gif)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {}
                    }
                ]
            },
            {
                test: /\.glsl$/,
                loader: 'webpack-glsl-loader'
            },
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/
            },
            {
                test: /\.ts$/,
                enforce: 'pre',
                loader: 'tslint-loader',
                options: { failOnHint: true }
            }
        ]
    },
    resolve: {
        extensions: [".tsx", ".ts", ".js"]
    },
    entry: {
        app: './src/index.ts'
    },
    devtool: 'inline-source-map',
    devServer: {
        contentBase: './dist'
    },
    plugins: [
        new CleanWebpackPlugin(['dist']),
        new HtmlWebpackPlugin({
            title: 'Output Manager'
        })
    ],
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist'),
        publicPath: '/'
    }
};

这就是我创建开发服务器的方式：

const app = express();

const compiler = webpack(webpackConfig);

app.use(webpackDevMiddleware(compiler, {
    publicPath: webpackConfig.output.publicPath,
}));

app.listen(3000, () => {
    console.log('Listening on port 3000!\n');
});

此外，我的

src

结构如下：

src
|-images
| |- image.gif
|
|-app.ts

module.exports = __webpack_public_path__ + "9b626fa0956bfa785b543ef53e895d5e.gif";


//////////////////
// WEBPACK FOOTER
// ./src/images/image.gif
// module id = 109
// module chunks = 0

我正在尝试将图像加载到

app.ts

中，如下所示：

import img from './images/image.gif';

// ...

private loadImage(): void {
    const image = new Image();
    image.src = img;
    image.onload = () => {

    };
}

不幸的是，我得到：

获取404（未找到）

在Chrome的开发工具导航器中，我可以看到

webpack://./src/images/image.gif

。内容如下所示：

src
|-images
| |- image.gif
|
|-app.ts

module.exports = __webpack_public_path__ + "9b626fa0956bfa785b543ef53e895d5e.gif";


//////////////////
// WEBPACK FOOTER
// ./src/images/image.gif
// module id = 109
// module chunks = 0

此外，如果在调试时将

img

变量悬停，则可以看到名称字符串

“/9b626fa0956bfa785b543ef53e895d5e.gif”

。记录变量将返回

未定义的
，并且不会触发
图像。onload

如果我呼叫
http://localhost:8080/9b626fa0956bfa785b543ef53e895d5e.gif
在浏览器中，我可以看到图像

你知道为什么我无法加载图像，尽管我可以在浏览器中看到它并且路径字符串似乎在那里吗

编辑#1:

由于使用TypeScript，我必须声明一个模块才能导入
.gif
文件：

declare module "*.gif" {
  const content: any;
  export default content;
}

然后我发现这个问题的解决方法是从“styles.scss”
导入文件，如
import*作为样式。所以我尝试导入如下内容：

import * as img from './images/img.gif';

不幸的是，这导致：

错误TS2322:类型“typeof”*.gif”不可分配给类型
“字符串”

这是我的网页包配置的一个片段。这适用于加载图像

{
    test: /\.(gif|png|jpe?g)$/i,
    exclude: [/node_modules/],
    loaders: [
        'file-loader?hash=sha512&digest=hex&name=[hash].[ext]',
        'image-webpack-loader'
    ]
}

我在这里看到两个问题。首先，您应该尝试从“/images/img.gif”加载图像文件，如
import*作为img。您还必须在某个地方使用图像才能实际加载它。单独导入不会触发加载文件。但是一个简单的
console.log（img）应该触发它

第二个问题是出现此异常的原因：

错误TS2322:类型“typeof”*.gif”不可分配给类型
“字符串”

您应该尝试包装导入文件的实际使用情况，如：

if (typeof img === 'string') {
    console.log(img);
}

这样，将不会触发异常

我希望这有帮助。
你能像这样改变道路吗。注意这两个点。从“../images/img.gif”导入*作为img；把img的调用包装到if子句中实际上解决了这个问题，ty！