VUE使用webpack打包后，图片超过webpack.config.js里面设置的限制值时不显示

Question

先贴上webpak.base.config.js关于图片的代码

test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }

小于10k的图片都形成了base64码正常显示
但是超过的显示不了，css属性为这样

完整路径为这样

config.index.js的代码如下

 build: {
    env: require('./prod.env'),
    index: path.resolve(__dirname, '../dist/index.html'),
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '',
    productionSourceMap: true,
    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],
    // Run the build command with an extra argument to
    // View the bundle analyzer report after build finishes:
    // `npm run build --report`
    // Set to `true` or `false` to always turn it on or off
    bundleAnalyzerReport: process.env.npm_config_report
  },

如果将上面的assetsPublicPath按照部分网上的更改为'/'的话则所有打包后的引用路径为这样
file:///D:/static/js/app.77e13a999be27db608eb.js
就没有在项目目录下

css写在VUE文件里，图片文件放在src的平级目录static里

Answer 1

是我没跑在服务器上的

Answer 2

图片不显示无非就两种情况：一种是资源找不到，一种是样式问题，其中样式有可能是图片无高宽、层叠过低被覆盖等等！不过也有种奇葩情况，就是图片资源刚刚大于limit值一点点，如果该图片多个地方使用，会出现有些地方也会打包成base64，有些地方不会，那不会的地方就不会显示，我们公司项目就遇到了这种奇葩情况。这说明limit也会有微小误差的。
疑惑：
图片打包完引用路径不应该以‘/’开头吗？您这边是相对路径，在css文件中应该是找不到的。我这边打包路径是这样的：

是以‘/’开头的。

脚手架：index.js有设置图片打包路径的。

只要

我的个人服务器结果展示：

疑惑点：开发用的静态资源为什么放在这里面

这里面是静态资源，不需要版本管理的，脚手架直接copy的，具体进入webpack.prod.conf.js看看：

将您用于开发的静态资源移入src/assets下面

Answer 3

没错啊, 超过限制的话, 会把你的图片打包到 static/img/ 下, 然后引用. 至于没有正常显示, 你看看图片打包到 img文件夹下了没. 是不是样式错了.

Answer 4

您好，请问你这个问题解决了吗？