webpackcssurl报错怎么办-创新互联
这篇文章主要介绍webpack css url报错怎么办,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
创新互联公司长期为近千家客户提供的网站建设服务,团队从业经验10年,关注不同地域、不同群体,并针对不同对象提供差异化的产品和服务;打造开放共赢平台,与合作伙伴共同营造健康的互联网生态环境。为平房企业提供专业的成都网站制作、做网站,平房网站改版等技术服务。拥有十载丰富建站经验和众多成功案例,为您定制开发。webpack css url报错是因为图片加载路径错误,其解决办法:首先打开相应的代码文件;然后打包样式中的背景图;最后重新添加publicPath即可。
webpack中css的url报错?
css-loader:
//打包样式中背景图 { test: /\.(png|jpg)$/, loader: "url-loader?limit=8192&name=images/[hash:8].[name].[ext]" //limit参数,代表如果小于大约4k则会自动帮你压缩成base64编码的图片,否则拷贝文件到生产目录 //name后面是打包后的路径; //loader 后面 limit 字段代表图片打包限制,这个限制并不是说超过了就不能打包, //而是指当图片大小小于限制时会自动转成 base64 码引用 //上例中大于8192字节的图片正常打包,小于8192字节的图片以 base64 的方式引用。 },
当小于8192,就打包成base64,那么,大于的就不做处理;
情景:我在main.css中背景图:
.page4-bg{ background:url("../images/page4-bg.jpg") no-repeat center; background-size:cover; }
结果:打包的时候,图片是在dist/images/文件夹下的,但是控制台中却是:
Failed to load resource:the server responded with a status of
404(Not Found)
图片没有找到,于是我去查看路径:
貌似图片是加载进来了,好像没什么问题,接着在图片地址上鼠标右击---open in new tab,结果
而我文件图片的目录地址是
这样的,去掉路径中的css,就能够显示图片了
解决方案:
//打包样式中背景图 { test: /\.(png|jpg)$/, loader: "url-loader?limit=8192&name=images/[hash:8].[name].[ext]", options:{ publicPath:'./images' } //limit参数,代表如果小于大约4k则会自动帮你压缩成base64编码的图片,否则拷贝文件到生产目录 //name后面是打包后的路径; //loader 后面 limit 字段代表图片打包限制,这个限制并不是说超过了就不能打包,而是指当图片大小小于限制时会自动转成 base64 码引用 //上例中大于8192字节的图片正常打包,小于8192字节的图片以 base64 的方式引用。 },
添加publicPath。
以上是“webpack css url报错怎么办”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!
分享文章:webpackcssurl报错怎么办-创新互联
网站地址:http://hbruida.cn/article/cedhhh.html