webpack url-loader copied image can not open

Question

In main.jsx ,image haven been compiled to base64 dataurl, and copied in bundle file(f67531eee03d5b3f45d6d010c1a2ce13.png) but can't open by both browser and webstorm , show format error as below.

enter image description here

main.jsx

   import React from 'react';
import ReactDOM from 'react-dom';
import discountPng from 'url-loader?limit=30000&mimetype=image/png!./back.png';
console.log(discountPng);

const  test= <img src={discountPng}/>
ReactDOM.render(test, document.getElementById('header'));

config

var path = require('path');
var webpack = require('webpack');

var nodeModulesPath = path.resolve(__dirname, 'node_modules');
module.exports = {
    entry: ['webpack-hot-middleware/client', './WxXqg/src/main.jsx'],
    output: {
        path: path.resolve(__dirname, 'WxXqg/bundle'),
        publicPath: '/static/',
        filename: 'bundle.js'
    },
    resolve: {
        extensions: ['', '.js', '.jsx','.png']
    },
    plugins: [
        new webpack.optimize.DedupePlugin(),
        new webpack.optimize.OccurenceOrderPlugin(),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin(),

    ],
    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=30000&mimetype=image/png" },
            { test: /\.svg/, loader: "url-loader?limit=10000&mimetype=image/svg" }
        ]
    }
};

console.log

here is my the browser and list

• enter console.log description here