阅读 337

#求教# 公共less模块中的背景图片地址应该怎么处理?

问题是这样的 ,我有一个公共组件模块,其中包含less写的样式而且样式中有url形式的背景图。其他项目在引用这个模块的时候,会引入这个less文件,项目使用webpack打包后会单独抽离出css样式文件(ExtractTextPlugin)。这就导致一个问题,背景图片使用的相对地址在各个项目中无法找到的,也就是背景图片报404错误。

网上的解决方案

1. 绝对地址

最简单的但是把图片上传到文件服务器,然后使用绝对地址。但是每次更新图片都要上传服务器,而且无法控制多个版本。

2. 使用字体文件

这种方法存在跨域问题,不适合公共组件样式。

3. base64转码

如果使用webpack对公共组件模块进行打包的话,我们可以把file-loader把图片转为base64,然后把css一起打包进js。但是如果背景图片被多次引用会出现许多重复的base64图片。而且外部项目直接引入es6模块,所以公共模块本身没有必要打包。

各位大佬有没有什么好的方案,求分享一下经验啊。

文章分类
前端