Vue.js样式中包含图片，编译报错？

Question

自己写了一个Vue的小demo，style里面有这样一个引用图片的样式

.field-content .icon-filter {
    float: left;
    width: 16px;
    height: 16px;
    margin-top: -1px;
    margin-right: 2px;
    background: url('../img/querypanel-icon.png') no-repeat;
    background-position: -43px -10px;
}

编译的时候报错，是我的webpack没配置某个loader吗？

Answer 1

是的，你需要加一个file-loader或者url-loader来处理以.png结尾的图片才行

Answer 2

你没有配置处理 png 图片的 loader，像这样：

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

url 是需要 url-loader ，也可以用 file-loader。