如何为Wicked PDF的PDF布局生成含图片绝对路径的预编译CSS？

针对Wicked PDF无法识别CSS相对路径图片的问题，给你几个可行的解决办法：

方法1：利用Rails资源辅助方法（推荐） #

如果你的项目基于Rails，直接在预编译的SCSS/Sass文件里使用asset_url辅助方法生成绝对路径，替换原有的相对路径写法：

#nestedlist, #nestedlist li {
  font-size: 12px;
  list-style-type: none;
}
#nestedlist ul  {
  list-style-image: asset_url("yellow_dark.png"); 
} 
#nestedlist ul ul  {
  list-style-image: asset_url("red_base.png"); 
}
#nestedlist ul ul ul {
  list-style-image: asset_url("green_light.png");
}

预编译后，这些路径会自动转换成包含完整主机地址的绝对URL，Wicked PDF就能正确加载图片。

方法2：手动配置绝对路径 #

如果不想用辅助方法，直接写完整的绝对路径，注意根据开发/生产环境调整域名：

#nestedlist ul  {
  list-style-image: url("https://your-domain.com/assets/yellow_dark.png"); 
} 

这种方式适合环境固定的场景，但切换环境时需要手动修改路径，灵活性较差。

方法3：全局配置Wicked PDF的资源主机 #

在Rails项目的config/initializers/wicked_pdf.rb文件里设置全局asset_host，让所有资源路径自动带上对应主机地址：

WickedPdf.config = {
  asset_host: Rails.env.production? ? "https://your-production-domain.com" : "http://localhost:3000"
}

配置后配合asset_url使用，就能自动适配不同环境的绝对路径。

内容的提问来源于stack exchange，提问作者Jerome