通过Webpack在模块中导入图像 [英] Import Images in Module Through Webpack

问题描述

我正在使用NodeJs，webpack& ES2015适合我的应用。

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

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

编辑：
根据Sitian的请求，这是我的webpack配置：

  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 = {
条目：{
 app：PATHS.app 
}，
 resolve：{//帮助我们引用.js？没有分机
扩展名：[，。js，。jsx] 
}，
输出：{
路径：PATHS.build，
文件名： bundle.js
}，
模块：{
 preLoaders：[
 {
 test：/\ css$/, 
 loaders：[ postcss]，
包括：PATHS.app 
}，
 {
 test：/\。jsx？$ /，
 loaders：[eslint ]，
包括：PATHS.app 
} 
]，
装载机：[
 {
 test：/\ css$ /，
 loaders：[style，css]，
包括：PATHS.app 
}，
 {
 test：/\。jsx？$ /，
 loader：'babel'，
查询：{
 cacheDirectory：true，
 presets：['react'，'e s2015'] 
}，
包括：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'
}， 
插件：[
 new webpack.HotModuleReplacementPlugin（）
] 
}）; 
} 
 if（TARGET ===build）{
 module.exports = merge（common，{}）; 
} 
  

解决方案

file-loader （或 url-loader ，如果文件小于限制可以返回数据URL，则可用于将图像导入模块。

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

配置

  {test：/\.png $ /，loader：url-loader？mimetype = image / png} 
  

I am using NodeJs, webpack & ES2015 for my app.

I cannot seem to figure out how to import an image/s in my modules. The following does not work.

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

EDIT: As per Sitian's request, here is my webpack config:

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, {} );
}

解决方案

The file-loader (or url-loader, which "can return a Data Url if the file is smaller than a limit") can be used to import images into modules.

See the webpack loaders documentation for more information on how to use such loaders:

Configuration

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

这篇关于通过Webpack在模块中导入图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！