Sometimes the resource file cannot be found after the css reference image is packaged.

This time I will bring you the reason why resource files cannot be found after css reference images are packaged. How to solve the problem of resource files not being found after css reference images are packaged. What are the precautions? What are the actual combats? Let’s take a look at the case.

Use vue to package and reference image resources through css.

.img { 
  height: 500px; 
  width: 100%; 
  background: url("./assets/img/1.jpg") no-repeat; 
  background-size: 100%; 
 }

The effect of hot updating the development environment is like this

But the page after packaging reports an error that the resource cannot be found.

I checked the reason. After the css introduced the image and then packaged it, the style-loader could not set its own publicPath, so I changed the css of ExtractTextPlugin. path publicPath.

if (options.extract) { 
   return ExtractTextPlugin.extract({ 
    use: loaders, 
    // css 引用图片打包问题 
    publicPath: '../../../', 
    fallback: 'vue-style-loader' 
   }) 
  } else { 
   return ['vue-style-loader'].concat(loaders) 
  }

After building once, no error was reported and the display was normal!

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to deal with the failure of font and image resources after vue packaging

How to solve the problem that the webpack font icon cannot be displayed

The above is the detailed content of Sometimes the resource file cannot be found after the css reference image is packaged.. For more information, please follow other related articles on the PHP Chinese website!