Vue-loader: background: url('./test') is not work

[lizy0329]

webpack.config

module: {
    loaders: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.jpg$/, loader: "file-loader"
      },
      {
        test: /\.png$/, loader: "url-loader?mimetype=image/png"
      },
      {
        test: /\.js$/,
        // excluding some local linked packages.
        // for normal use cases only node_modules is needed.
        exclude: /node_modules|vue\/src|vue-router\/|vue-loader\/|vue-hot-reload-api\//,
        loader: 'babel'
      }
    ]
  },

file structure

  build
  src
    components
      app.vue
    fonts
    scss
      test.scss
      test.jpg
    views
    main.js

test.scss

.test-bg {
    width: 100%;
    height: 300px;
    border: 1px solid #999;
    background-image: url(./test.jpg);

}

console.log

Uncaught Error: Cannot find module "./test.jpg"

why?I have try many path for background-url

[yyx990803]

你在哪里引用的 test.scss?

[lizy0329]

我在app.vue里@import "../scss/test"

background-image: url(../scss/test.jpg);也是 Cannot find module "../scss/test.jpg"

由于我还是在本地文件夹测试，没放到服务器上。今天把路径调通了，background-image: url(./test.jpg);替换成background-image: url(（E:）/FEproject/vue-component/src/scss/test.jpg);就正常

[skinTest]

尤大大，动态动生成组件的时候 引用图片感觉略疼。
调用过程
<square-wrapper type="icon" :contents='icons'></square-wrapper>
// icons = ['../assets/img/icon_nav_article.png', '来图 ', '/'] 冗余代码都省略掉了
<square-icon v-else :path="content[2]" :url="content[0]" :text="content[1]"></square-icon>

以下是子元素。

<a v-if="path" v-link="{ path: path }"
   class="weui_grid js_grid">
  <div class="weui_grid_icon">
      <img :src="url" alt="">
      <img src="../assets/img/icon_nav_article.png">
  </div>
  <p class="weui_grid_label">
      {{text}}
  </p>
</a>
<div v-if="!path"
     class="weui_grid js_grid">
  <div class="weui_grid_icon">
      <img :src="url" alt="">
  </div>
  <p class="weui_grid_label">
      {{text}}
  </p>
</div>

<square-icon></square-icon>所调用的图片不会被inline到chunk当中，可以将图片置于static中，但是明显不太理想，不知道应该如何包装组件才能即动态的生成组件，且发布时图片能够构建到chunk中

[yyx990803]

动态图片 url 用 require 调用才能启用 file-loader：

icons = [require('../assets/img/icon_nav_article.png')]

[iqingting]

动态图片 url 用 require 调用才能启用 file-loader

遇到这个问题 +1