根据file-loader使用文档,我应该能够像这样加载图片:
这是我的
这是我创建
此外,如果我在调试时悬停在
如果我在浏览器中调用
有任何想法吗?为什么我无法加载图像,尽管我可以在浏览器中看到它,并且路径字符串似乎已经存在?
编辑#1:
由于我正在使用TypeScript,因此必须声明一个模块以导入
很不幸,这导致了以下问题:
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: '/'
}
};
这是我创建
dev-server
的方法: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
我正在尝试在app.ts
中按以下方式加载图像:
import img from './images/image.gif';
// ...
private loadImage(): void {
const image = new Image();
image.src = img;
image.onload = () => {
};
}
很不幸我得到了以下错误:
GET http://localhost:8080/undefined 404 (未找到)
在Chrome开发工具的导航器中,我可以看到图像文件位于webpack://./src/images/image.gif
下。内容如下:
module.exports = __webpack_public_path__ + "9b626fa0956bfa785b543ef53e895d5e.gif";
//////////////////
// WEBPACK FOOTER
// ./src/images/image.gif
// module id = 109
// module chunks = 0
此外,如果我在调试时悬停在
img
变量上,我可以看到名为"/9b626fa0956bfa785b543ef53e895d5e.gif"
的字符串。但是记录该变量会返回undefined
,并且image.onload
从未被触发。如果我在浏览器中调用
http://localhost:8080/9b626fa0956bfa785b543ef53e895d5e.gif
,我可以看到图像。有任何想法吗?为什么我无法加载图像,尽管我可以在浏览器中看到它,并且路径字符串似乎已经存在?
编辑#1:
由于我正在使用TypeScript,因此必须声明一个模块以导入
.gif
文件:declare module "*.gif" {
const content: any;
export default content;
}
我发现了这个Github 问题,其中解决此问题的方法是像这样导入文件:import * as styles from "styles.scss"
。因此,我尝试通过以下方式导入:
import * as img from './images/img.gif';
很不幸,这导致了以下问题:
错误 TS2322:类型“typeof "*.gif"”不能赋值给类型“string”。