无法使用 Webpack 文件加载器加载图像
Unable to load images using Webpack file-loader
根据 file-loader usage documentation 我应该能够加载像这样的图像:
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 (Not Found)
在 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"
。尽管记录变量 returns undefined
并且永远不会触发 image.onload
。
如果我在浏览器中调用 http://localhost:8080/9b626fa0956bfa785b543ef53e895d5e.gif
我可以看到图像。
虽然我可以在浏览器中看到它并且路径字符串似乎在那里,但为什么我无法加载图像?知道吗?
编辑#1:
因为我使用的是 TypeScript,所以我必须声明一个模块才能导入 .gif
个文件:
declare module "*.gif" {
const content: any;
export default content;
}
然后我发现这个 Github issue 问题的解决方法是导入 import * as styles from "styles.scss"
之类的文件。所以我尝试导入:
import * as img from './images/img.gif';
不幸的是,这导致:
error TS2322: Type 'typeof "*.gif"' is not assignable to type
'string'.
这是我的 webpack 配置的一个片段。这适用于加载图像。
{
test: /\.(gif|png|jpe?g)$/i,
exclude: [/node_modules/],
loaders: [
'file-loader?hash=sha512&digest=hex&name=[hash].[ext]',
'image-webpack-loader'
]
}
我在这里看到两个问题。首先,您应该尝试像 import * as img from './images/img.gif';
一样加载您的图像文件。您还必须在某处使用图像才能实际加载它。单独导入不会触发加载文件。但是一个简单的 console.log(img);
应该会触发它。
第二个问题是你得到这个异常的原因:
error TS2322: Type 'typeof "*.gif"' is not assignable to type
'string'.
您应该尝试包装导入文件的实际用法,如:
if (typeof img === 'string') {
console.log(img);
}
这样就不会触发异常
希望对您有所帮助。
根据 file-loader usage documentation 我应该能够加载像这样的图像:
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 (Not Found)
在 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"
。尽管记录变量 returns undefined
并且永远不会触发 image.onload
。
如果我在浏览器中调用 http://localhost:8080/9b626fa0956bfa785b543ef53e895d5e.gif
我可以看到图像。
虽然我可以在浏览器中看到它并且路径字符串似乎在那里,但为什么我无法加载图像?知道吗?
编辑#1:
因为我使用的是 TypeScript,所以我必须声明一个模块才能导入 .gif
个文件:
declare module "*.gif" {
const content: any;
export default content;
}
然后我发现这个 Github issue 问题的解决方法是导入 import * as styles from "styles.scss"
之类的文件。所以我尝试导入:
import * as img from './images/img.gif';
不幸的是,这导致:
error TS2322: Type 'typeof "*.gif"' is not assignable to type 'string'.
这是我的 webpack 配置的一个片段。这适用于加载图像。
{
test: /\.(gif|png|jpe?g)$/i,
exclude: [/node_modules/],
loaders: [
'file-loader?hash=sha512&digest=hex&name=[hash].[ext]',
'image-webpack-loader'
]
}
我在这里看到两个问题。首先,您应该尝试像 import * as img from './images/img.gif';
一样加载您的图像文件。您还必须在某处使用图像才能实际加载它。单独导入不会触发加载文件。但是一个简单的 console.log(img);
应该会触发它。
第二个问题是你得到这个异常的原因:
error TS2322: Type 'typeof "*.gif"' is not assignable to type 'string'.
您应该尝试包装导入文件的实际用法,如:
if (typeof img === 'string') {
console.log(img);
}
这样就不会触发异常
希望对您有所帮助。