Symfony项目中如何通过CSS content属性正确设置PNG图片？

你遇到的404问题核心是没搞懂Symfony的资源路径映射逻辑——你在CSS里写的相对路径是基于本地源码目录的，但Symfony会对Bundle里的资源做路径转换，最终的资源位置和你写的public/assets/并不一致。下面分两种常用场景给你解决方案：

一、传统Symfony（未使用Webpack Encore） #

1. 先同步Bundle资源到公共目录
   首先执行Symfony自带的资源安装命令，把AppBundle/Resources/public/下的资源复制到项目的公共访问目录：

   # Symfony 4+ 版本
   php bin/console assets:install public
   # Symfony 3及更早版本
   php bin/console assets:install web
   

   执行后，你的图片会被复制到public/bundles/app/img/optional-checked.png（或web/bundles/app/img/optional-checked.png）。

2. 修正CSS中的路径
   假设你的CSS文件最终部署在public/css/目录下，那么需要用相对路径指向图片的实际位置：

   content: url(../bundles/app/img/optional-checked.png);
   

二、使用Webpack Encore（Symfony 4+推荐方案） #

如果你的项目用了Webpack Encore来管理前端资源，更推荐遵循Encore的资源约定：

1. 调整资源存放位置
   把图片从AppBundle/Resources/public/img/移到项目根目录的assets/img/下（这是Encore默认的资源目录结构）。

2. 在CSS中引用图片
   假设你的CSS文件在assets/css/目录下，直接用相对路径引用即可：

   content: url(../img/optional-checked.png);
   

3. 编译前端资源
   执行Encore的编译命令，它会自动处理资源的路径和复制：

   # 开发环境
   yarn encore dev
   # 生产环境
   yarn encore production
   

小提示 #

如果还是不确定路径，可以先执行资源同步/编译命令，然后直接去public/目录下找到图片的实际位置，再反向推导CSS里的相对路径，这样就不会出错啦。

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