css - .css 文件未在 Symfony2 中加载图像

Question

我对 Symfony2 还很陌生，正在尝试创建我的第一个 php 应用程序。

一切正常，直到我开始在我的 .css 文件中设置背景图像。出于某种原因，对 .css 文件的所有更改（背景颜色、字体等）都反映在我的 new.html.twig 文件接受图像中。

我的印象是我做了所有应该做的事情，但可能顺序错误（在新捆绑包中完成以下）：

Resources/public/css 创建了 style.css 文件（这是它的样子）：

.test{
     font-size: 25px;
     background-color: yellow;
}

.topstyles {
    width: 135px;
    height: 113px;
    background-color: blue;
}

.topstyleg {
    background-image: url(images/ice.png);
}

.col2{
    position: absolute;
    left: 300px;
    top: 100px;
}

.form-control {
    margin-bottom: 3px;
}

将图像放在资源/公共/图像下的我的捆绑文件夹中

在我的 new.html.twig 中添加了指向 .css 文件的链接

{% block stylesheets %}
   {% stylesheets '@TestTestBundle/Resources/public/css/*' filter='cssrewrite' %}
   <link rel="stylesheet" href="{{ asset_url }}" type="text/css"/>
   {% endstylesheets %}
{% endblock %}

Ran php 应用程序/控制台资产：安装 web --symlink。由于我的系统不支持符号链接，因此只是在 web/bundles 文件夹中复制了我的 bundle Resources 文件夹的文件，包括 .css 和图像。
每次对我的 bundle/Resources 文件夹中任何文件夹中的任何文件进行更改时，我都会重新运行 assets:install，因此所有更改都会反映在 web/bundles/testtestbundle 中。

使用 php app/consoleassetic:dump 进行转储，在 root/web 目录中创建单独的 css 文件夹，其中 .css 文件如下所示

.test{
     font-size: 25px;
     background-color: yellow;
}

.topstyles {
    width: 135px;
    height: 113px;
    background-color: blue;
}

.topstyleg {
    background-image: url(../../Resources/public/css/images/ice.png);
}

.col2{
    position: absolute;
    left: 300px;
    top: 100px;
}

.form-control {
    margin-bottom: 3px;   
}

使用 php app/console 缓存清除缓存：clear --env=prod --no-debug

并且由于某种原因，所有更改都反映接受图像。

我已经尝试过的资源是：

以及其他一些资源，但无论我做什么，它似乎都不起作用。

有可能我没有安装一些需要的捆绑包，但是： - 我无法弄清楚哪个 - 如果缺少某些东西，我假设我不会从 .css 文件上传任何格式，并且我只能让图像工作，休息加载就好了。

任何帮助都将受到高度赞赏，因为我花了好几个小时试图弄清楚这一点。

score 0 · Accepted Answer

经过一些试验和错误，感谢 Dric512，我能够解决这个问题。

似乎我在 new.html.twig 中使用了不正确的链接（至少在我的情况下是不正确的）

{% block stylesheets %}
   {% stylesheets 'bundles/testtestbundle/css/*' filter='cssrewrite' %}
   <link rel="stylesheet" href="{{ asset_url }}" type="text/css"/>
   {% endstylesheets %}
{% endblock %}

此外，由于我的图像位于不同的文件夹中，因此我的 .css 文件必须像这样引用它们：

.test{
    font-size: 25px;
    background-color: yellow;
}
.topstyles {
    width: 135px;
    height: 113px;
    background-color: blue;
}

.topstyleg {
    background-image: url(../images/ice.png);
}

.col2{
    position: absolute;
    left: 300px;
    top: 100px;

}
.form-control {
    margin-bottom: 3px;   
}

所有这些都是由我创建的 src/Test/TestBundle/Resources/css/style.css 文件完成的。

完成后，我使用以下方法创建了资产： php app/console assets:install web -- symlink

完成后，我运行 php app/console assetic:dump 和 php app/console cache:clear 以防万一。

像魅力一样工作。

score 0 · Accepted Answer

因为你有 css 文件Resource/public/css和图像文件Resource/public/images，你应该像这样在 CSS 文件中定义 url：

.topstyleg {
    background-image: url(../images/ice.png);
}

过滤器cssrewrite要求您使用相对路径（从 css 文件的角度来看）

score -1 · Accepted Answer

我知道这个答案没有回答这个问题，但我建议将DataURIs用于 css 图像，它们无需任何源文件即可工作，您无需保留原始图像。它减少了 HTTP 请求。

或者，不要使用 Assetic 捆绑包，使用标准资产

css - .css 文件未在 Symfony2 中加载图像

3 回答 3

Related

Reference