webpack url-loader

Question

url-loader 使用后 资源无法显示

dicountPng打印出data-url base64 资源

但是显示不了图片

module: {
        /* preLoaders: [
         {test: /\.(jsx|js)$/,loader: "source-map-loader"}
         ],*/
        loaders: [
            {test: /\.(jsx|js)$/,loader: 'babel?presets[]=es2015,presets[]=react,presets[]=stage-0,presets[]=stage-2,presets[]=stage-3'},
            {   test: /\.css$/, loader: 'style-loader!css-loader'},
            { test: /\.(png|jpg)$/, loader: 'file-loader' },
            { test: /\.jpg/, loader: "url-loader?limit=10000&mimetype=image/jpg" },
            { test: /\.gif/, loader: "url-loader?limit=10000&mimetype=image/gif" },
            { test: /\.png/, loader: "url-loader?limit=10000&mimetype=image/png" },
            { test: /\.svg/, loader: "url-loader?limit=10000&mimetype=image/svg" }
        ]
    }

import discountPng from 'url-loader?limit=10000&mimetype=image/png!img/discount.png';
/*import keepPng from 'url?limit=30000&mimetype=image/png!img/keep.png';*/
/*import personal from 'url?limit=30000&mimetype=image/png!img/personal.png';*/
/*import ApplianceRepair from 'url?limit=30000&mimetype=image/png!img/ApplianceRepair.png';*/
console.log(discountPng);

const  test=()=>(
    <img src={discountPng}/>
);

Answer 1

我这样写的:

{
  test: /\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/,
  loader: 'url?limit=25000'
}

直接url就可以了

Answer 2

应该是图片的路径配置有问题的说

Answer 3

url-loader?limit=10000看这句话，显示不了说明你的图片超过了10k