通过Webpack在模块中导入图像

我正在使用NodeJs，webpack＆ES2015为我的应用程序。

我似乎无法弄清楚如何导入我的模块中的图像。 以下不起作用。

import "../../css/image/t1.png"; 

编辑：根据锡蒂安的要求，这里是我的webpackconfiguration：

 const webpack = require( "webpack" ); const path = require( "path" ); const merge = require( "webpack-merge" ); const TARGET = process.env.npm_lifecycle_event; process.env.BABEL_ENV = TARGET; const PATHS = { app : path.join( __dirname, "app" ), build : path.join( __dirname, "build" ) }; const common = { entry : { app : PATHS.app }, resolve : { // helps us refer to .js? without ext. extensions : [ "", ".js", ".jsx" ] }, output : { path : PATHS.build, filename : "bundle.js" }, module : { preLoaders : [ { test : /\.css$/, loaders : [ "postcss" ], include : PATHS.app }, { test : /\.jsx?$/, loaders : [ "eslint" ], include : PATHS.app } ], loaders : [ { test : /\.css$/, loaders : [ "style", "css" ], include : PATHS.app }, { test : /\.jsx?$/, loader : 'babel', query : { cacheDirectory : true, presets : [ 'react', 'es2015' ] }, include : PATHS.app } ] } }; if( TARGET === "start" || !TARGET ) { module.exports = merge( common, { devtool : 'inline-source-map', devServer : { contentBase : PATHS.build, hot : true, progress : true, stats : 'errors-only' }, plugins : [ new webpack.HotModuleReplacementPlugin() ] } ); } if( TARGET === "build" ) { module.exports = merge( common, {} ); } 

Answer 1

文件加载器 （或url-loader ， 如果文件小于限制 ， 可以返回一个Data Url ）可以用来将图像导入到模块中。

有关如何使用这种装载机的更多信息，请参阅webpack装载机文档 ：

组态

 { test: /\.png$/, loader: "url-loader?mimetype=image/png" } 

Answer 2

使用当前版本的webpack它应该工作：

 import t1 from "../../css/image/t1.png"; 

和你的webpack.config（webpack 2.0）：

 module: { rules: [ {test: /\.png$/, use: 'url-loader?mimetype=image/png'}, ] } 

Answer 3

你可以通过在你的webpack（v1）configuration中添加一个加载器来完成：

  { test: /\.png$/, loader: "url-loader?mimetype=image/png" } 

然后安装它：

 npm install url-loader 

最后你将能够使用以下方式导入图像：

 import image from 'images/name.png'