2016-08-01 2 views
0

로컬로 이미지를로드하려고하는데 이미지 파일이 jsx 파일의 같은 폴더에 있습니다. 이다Webpack img-loader가 이미지를로드 할 수 없습니다.

path = require('path'); 

module.exports = { 
    context: __dirname, 
    entry: "./app/entry.jsx, 
    output: { 
    path: path.join(__dirname, 'lib'), 
    filename: "bundle.js", 
    devtoolModuleFilenameTemplate: '[resourcePath]', 
    devtoolFallbackModuleFilenameTemplate: '[resourcePath]?[hash]' 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /\.jsx?$/, 
     exclude: /(node_modules|bower_components)/, 
     loader: 'babel', 
     query: { 
      presets: ['react'] 
     } 
     }, 
     { 
     test: /\.css$/, 
     loader: "style-loader!css-loader?root=." 
     }, 
     { 
     test: /\.(jpe?g|png|gif|svg)$/i, 
     loader: 'url?limit=10000!img?progressive=true' 
     } 
    ] 
    }, 
    devtool: 'source-map', 
    resolve: { 
    extensions: ["", ".js", ".jsx" ] 
    } 
}; 

을하고 jsx는 오류가 콘솔에 표시이

var loadingImg = require('url!img!./loading.gif'); 

같다 : :이를로드하는 방법을

ERROR in Loader app/node_modules/url/url.js didn't return a function 
@ app/components/session/login.jsx 5:17-49 

webpack.config.js은 다음과 같습니다있다 영상?

+0

'require()'에 정의 된 로더가 필요하지 않습니다. 문서에서 : "[구성의 로더 지정은 권장되는 방법입니다] (https://webpack.github.io/docs/loaders.html)" –

답변

0

webpack 구성 파일에서 잘못된 점이 없습니다. 코드에서 이미지를 호출하는 방식을 살펴보고 나에게 맞지 않습니다. 코드를 어디에 사용하려고하는지 잘 모르겠지만 뭔가 할 수 있습니다.

<img src={require("../../images/some-filepath/some-image.png")} /> 

나 :

난 당신이보고 싶을 경우 이미지 웹팩 로더를 사용하기위한 tutorial a while ago을했다
<Image source={{uri: '../../images/some-filepath/some-image.png'}} /> 

.

어쨌든이 도움이 되길 바랍니다.

관련 문제