Question

使用symphony框架我做了转储资产资产：安装。 css文件很难复制到/web/bundles/appbundle/css/style.css我猜css中的背景图像我应该有一个相对路径到达/ web /文件夹之外吗？

background-image: url(../../../../bundles/appbundle/images/top_bg.jpg);

但它还没有工作，我有过滤器=＆＃39; cssrewrite＆＃39;在css标签中也是如此。可能我必须补充一点，我只是在资源安装后编辑位于上面路径的css文件，我没有编辑/ Acme / Bundle / Resources / public / css中的那个。然后我确实运行了资产：dump，现在在/ web /文件夹中有两个文件夹用于图像和css，我查看了新的css并看到路径变成这样：

background-image: url(../../bundles/applicationadmin/images/top_bg.jpg);

但仍然所有图像都被破坏了。我搜索stackoverflow并找到this question，但仍然有问题。我该怎么办？

请告知。

Answer 1

首先，确保您的css和图像位于正确的文件夹中。

src/AppBundle/Resources/public/css/style.css
src/AppBundle/Resources/public/images/top_bg.jpg

运行资产资产后：安装，检查您的网络目录中是否有文件夹。它必须是Resources / public的相同副本。

web/bundles/app/css/style.css
web/bundles/app/images/top_bg.jpg

你的style.css文件应如下所示：

background-image: url("../../images/top_bg.jpg");

但是，如果您直接在twig模板上配置css，则网址不同：

<style>
  div { background-image: url("/bundles/app/images/top_bg.jpg"); }
</style>

Answer 2

要使它在树枝上工作，请试试这个

<div class="container" style="background-image:url('{{ asset('bundles/appbundle/images/top_bg.jpg') }}')"> ,

当然假设您已将软件包的Web资产安装在公共Web目录下。

Answer 3

我可以通过以下步骤解决此问题：

首先让Webpack完成他的工作。
让我们将所有文件复制到public / build目录（图像和CSS文件）
下一步是通过树枝/ smarty将css样式包含在模板中
立即在“链接”标记之后，打开“脚本”标记并覆盖所有受影响的样式。在Twig中，您可以使用“资产”功能从清单中加载相应的URL。

即：

<link type="text/css" rel="stylesheet" rev="stylesheet" href="{{ asset('/build/css/header.css') }}">
<style >
    .header { background-image: url('{{ asset('build/img/logo.png') }}') !important; }
</style>

您的背景图片已正确更改。输出如下：

<link type="text/css" rel="stylesheet" rev="stylesheet" href="/build/css/header.5c7b2ca6.css">
<style >
    .header { background-image: url('/build/img/logo.bb1272f9.png') !important; }
</style>

这不是使用Webpack的最佳方法。但是，这是一种重构过期代码的临时解决方案。下一步应该是使用SCSS创建入口点并构建样式。然后，Webpack会照顾样式中资产的正确使用。

如何在symfony资产中拥有背景图片？

3 个答案: