在 Symfony 4 中设置（CSS 背景图像）图像资源答案

【问题标题】：Set (CSS background-image) image assets in Symfony 4在 Symfony 4 中设置（CSS 背景图像）图像资源
【发布时间】：2019-01-04 11:45:28
【问题描述】：

我正在使用 Symfony 4 进行练习，并尝试通过 CSS 显示我的图像。现在，当我运行 npm run dev 时，它只编译 CSS 和 JS 文件，而不编译图像。我将所有图像移至/assets/img/ 文件夹。

现在我很想知道如何使用 CSS 路径来适应 Symfony 环境。我只找到了关于 Symfony 2 和 3 的解决方案，这些解决方案在这个版本中不起作用。我的 CSS 是：

.about-solution-about {
  background: url(/img/placeholder.jpg) no-repeat center;
  background-size: cover;
  width: 540px;
  height: 330px;
  padding-top: 40px;
}

图片现在在这个位置：project/assets/img/placeholder.jpg

不知何故，我需要通过编译的 app.css 文件访问 public 文件夹中的这个图像。我知道app.css和app.js文件被编译并放在/public/build/文件夹中。

现在，我如何将所有图像资源编译或构建到 /public/build/ 文件夹并在我的 CSS 中调用这些文件？

【问题讨论】：

标签： php css symfony path twig

【解决方案1】：

/assets/ 文件夹中常规 CSS 和 JS 资产的构建由项目目录中的 Webpack Encore webpack.config.js 文件处理。

当您在终端中运行npm run dev 命令时，文件app.css 和app.js 将被编译并放置在/public/build/ 文件夹中。

如果您还希望将图像包含在 /public/build/ 文件夹中，您可以使用 Copy Webpack Plugin。

首先，在终端中使用npm i -D copy-webpack-plugin 命令安装插件。

然后在您的主项目文件夹中编辑webpack.config.js 文件。在第一行下，添加：

var CopyWebpackPlugin = require('copy-webpack-plugin');

然后在 Encore 部分以分号 ; 结尾之前，添加：

.addPlugin(new CopyWebpackPlugin([
        { from: './assets/img', to: 'img' }
    ]))

JSFiddle整个文件here的示例。

现在，确保/assets/img/ 文件夹中有图片。

运行npm run dev 命令，您会看到assets 文件夹中的所有图像现在都可以在/public/build/img/ 文件夹中使用了！！

在您的示例中，您的 CSS 中的正确路径现在是：

background: url(/build/img/placeholder.jpg) no-repeat center;

【讨论】：

【解决方案2】：

您可以尝试在样式表 twig tag / base twig / 中使用 cssrewrite 过滤器：

{% stylesheets 'source to css files' filter='cssrewrite' %}

{% endstylesheets %}

【讨论】：

【解决方案3】：

我认为没有办法在纯 CSS 代码中使用资产。我建议你在你的 HTML 中设置背景参数，你实际上可以。希望你能解决！

【讨论】：