laravel gulp 后图片打不开

Question

我在vue中加载了四个图片，gulp后编译到了public/img目录下。

我的gulp安装在root下，所以我又手动把他们的权限给调回来了。

但是我通过http请求这个文件，返回的状态码是200，却无法显示图片。

我在phpstorm里面打开，报错如下图

使用mac自带的图片预览也不行

gulp的配置：

const elixir = require('laravel-elixir');

require('laravel-elixir-webpack-official')
require('laravel-elixir-vue-2');


elixir((mix) => {
    mix.sass('app.scss')
        .webpack('app.js');
    mix.version(['js/app.js','css/app.css'])

});

Elixir.webpack.mergeConfig({
    module: {
        loaders: [
            {
                test: /\.css/,
                loader: "style!css"
            },
            {
                test:/\.(png)|(jpg)|(jpeg)|(gif)$/,
                loader: "url?limit=50000"
            }

        ]
    }
})

为什么gulp会把文件搞坏呢，以及怎么解决？