Webpack how to deal with the picture in the style tag in the vue single file component, and found that the picture was not packaged at all. Only packed css.

problem description

how does webpack deal with the picture in the style tag in the vue single file component, because the style is extracted, and it is found that the picture is not packaged at all. The original output is in the dist directory. After packaging, the image name should be generated according to the hash value I specified. Only the css
image processing package in the style tag is packaged loader:
{
test: /. (png | jpe?g | gif | svg) $/,
use: {

loader: "url-loader",
options: {
    limit: 10000,
    name: "images/[name].[hash:7].[ext]"
}

}
}
the following is the packaged file:
star.vue:
< template >

<h1>hello world!3344</h1>

< / template >
< script >
export default {

}
< / script >
< style scoped >
H1 {

   width: 100px;
   transform: rotateX(30deg);
   /* animation: animate ease 1s; */
   background: url("/images/demoImage.jpg") no-repeat;

}
< / style >
after packing:
H1 [data-v-1d1bee34] {

   width: 100px;
   transform: rotateX(30deg);
   /* animation: animate ease 1s; */
   background: url("/images/demoImage.jpg") no-repeat;

}
body {

margin: 0;
/* background: url("../images/demoImage.jpg") no-repeat; */

The picture in

}
backgound has not changed and the picture has not been generated.