个人中心
gpt4 book ai didi

php - Symfony 2 中 CSS 文件中的资源路径

转载 作者：IT老高 更新时间：2023-10-28 11:51:10 32 4
gpt4 key购买 nike

问题
我有一个 CSS包含一些路径的文件(用于图像、字体等。url(..))。
我的路径结构是这样的:

...
+-src/
| +-MyCompany/
|   +-MyBundle/
|     +-Resources/
|       +-assets/
|         +-css/
|           +-stylesheets...
+-web/
| +-images/
|   +-images...
...
我想在样式表中引用我的图像。
第一个解决方案
我将 CSS 文件中的所有路径更改为绝对路径。这不是解决方案，因为应用程序也应该(并且必须!)在子目录中工作。
第二种解决方案
与 filter="cssrewrite" 一起使用 Assetic .
所以我将 CSS 文件中的所有路径更改为 
url("../../../../../../web/images/myimage.png")
表示从我的资源目录到 /web/images 的实际路径目录。这不起作用，因为 cssrewrite 生成以下代码: 
url("../../Resources/assets/")
这显然是错误的道路。
后 assetic:dump这条路径创建好了，还是报错: 
url("../../../web/images/myimage.png")
Assetic的 Twig 代码: 
{% stylesheets
    '@MyCompanyMyBundle/Resources/assets/css/*.css'
    filter="cssrewrite"
%}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
当前(第三)解决方案
由于所有 CSS 文件都以 /web/css/stylexyz.css 结尾，我将 CSS 文件中的所有路径都更改为相对路径: 
url("../images/myimage.png")
除了 dev 之外，这个(糟糕的)解决方案是有效的。环境:
CSS 路径是 /app_dev.php/css/stylexyz.css因此由此产生的图像路径是 /app_dev.php/images/myimage.png ，这会导致 NotFoundHttpException .
有没有更好的和有效的解决方案？

最佳答案

我遇到了非常非常相同的问题。

简而言之:

  • 愿意在“内部”目录中拥有原始 CSS (Resources/assets/css/a.css)
  • 愿意在“公共(public)”目录中拥有图像(Resources/public/images/devil.png)
  • 愿意那根 Twig 接受那个 CSS，将它重新编译到 web/css/a.css 并使它指向/web/bundles/mynicebundle/images/devil.png
    • 中的图像

    我已经对以下所有可能的(理智的)组合进行了测试:
  • @notation，相对符号
  • 用 cssrewrite 解析，没有它
  • CSS 图像背景与直接 标签 src= 到与 CSS 完全相同的图像
  • CSS 使用 Assets 进行解析，也没有使用 Assets 直接输出进行解析
  • 所有这些都通过尝试使用 CSS 的“公共(public)目录”(如 Resources/public/css )和“私有(private)”目录(如 Resources/assets/css )而倍增。

    • 这给了我在同一根 Twig 上总共有 14 种组合，而这条路线是从
  • "/app_dev.php/"
  • "/app.php/"
  • 和“/”

    • 因此给出 14 x 3 = 42 个测试。

    此外，所有这些都已经在子目录中进行了测试，因此无法通过提供绝对 URL 来愚弄，因为它们根本不起作用。

    测试是两个未命名的图像，然后为从公共(public)文件夹构建的 CSS 命名为从“a”到“f”的 div，对于从内部路径构建的 CSS 命名为“g”到“l”。

    我观察到以下情况:

    14 个测试中只有 3 个在三个 URL 上得到了充分显示。 NONE 来自“内部”文件夹(资源/ Assets )。拥有备用 CSS PUBLIC 是先决条件，然后从那里使用 Assets 进行构建。

    这些是结果:
  • 使用/app_dev.php/启动的结果
    Result launched with /app_dev.php/
  • 结果用/app.php/启动
    Result launched with /app.php/
  • 结果以/启动
    enter image description here

    • 所以……只有
    - 第二张图片
    - 分区 B
    - 分区 C
    是允许的语法。

    这里有 TWIG 代码: 
    <html>
        <head>
                {% stylesheets 'bundles/commondirty/css_original/container.css' filter="cssrewrite" %}
                    <link href="{{ asset_url }}" rel="stylesheet" type="text/css" />
                {% endstylesheets %}

        {# First Row: ABCDEF #}

                <link href="{{ '../bundles/commondirty/css_original/a.css' }}" rel="stylesheet" type="text/css" />
                <link href="{{ asset( 'bundles/commondirty/css_original/b.css' ) }}" rel="stylesheet" type="text/css" />

                {% stylesheets 'bundles/commondirty/css_original/c.css' filter="cssrewrite" %}
                    <link href="{{ asset_url }}" rel="stylesheet" type="text/css" />
                {% endstylesheets %}

                {% stylesheets 'bundles/commondirty/css_original/d.css' %}
                    <link href="{{ asset_url }}" rel="stylesheet" type="text/css" />
                {% endstylesheets %}

                {% stylesheets '@CommonDirtyBundle/Resources/public/css_original/e.css' filter="cssrewrite" %}
                    <link href="{{ asset_url }}" rel="stylesheet" type="text/css" />
                {% endstylesheets %}

                {% stylesheets '@CommonDirtyBundle/Resources/public/css_original/f.css' %}
                    <link href="{{ asset_url }}" rel="stylesheet" type="text/css" />
                {% endstylesheets %}

        {# First Row: GHIJKL #}

                <link href="{{ '../../src/Common/DirtyBundle/Resources/assets/css/g.css' }}" rel="stylesheet" type="text/css" />
                <link href="{{ asset( '../src/Common/DirtyBundle/Resources/assets/css/h.css' ) }}" rel="stylesheet" type="text/css" />

                {% stylesheets '../src/Common/DirtyBundle/Resources/assets/css/i.css' filter="cssrewrite" %}
                    <link href="{{ asset_url }}" rel="stylesheet" type="text/css" />
                {% endstylesheets %}

                {% stylesheets '../src/Common/DirtyBundle/Resources/assets/css/j.css' %}
                    <link href="{{ asset_url }}" rel="stylesheet" type="text/css" />
                {% endstylesheets %}

                {% stylesheets '@CommonDirtyBundle/Resources/assets/css/k.css' filter="cssrewrite" %}
                    <link href="{{ asset_url }}" rel="stylesheet" type="text/css" />
                {% endstylesheets %}

                {% stylesheets '@CommonDirtyBundle/Resources/assets/css/l.css' %}
                    <link href="{{ asset_url }}" rel="stylesheet" type="text/css" />
                {% endstylesheets %}

        </head>
        <body>
            <div class="container">
                <p>
                    <img alt="Devil" src="../bundles/commondirty/images/devil.png">
                    <img alt="Devil" src="{{ asset('bundles/commondirty/images/devil.png') }}">
                </p>
                <p>
                    <div class="a">
                        A
                    </div>
                    <div class="b">
                        B
                    </div>
                    <div class="c">
                        C
                    </div>
                    <div class="d">
                        D
                    </div>
                    <div class="e">
                        E
                    </div>
                    <div class="f">
                        F
                    </div>
                </p>
                <p>
                    <div class="g">
                        G
                    </div>
                    <div class="h">
                        H
                    </div>
                    <div class="i">
                        I
                    </div>
                    <div class="j">
                        J
                    </div>
                    <div class="k">
                        K
                    </div>
                    <div class="l">
                        L
                    </div>
                </p>
            </div>
        </body>
    </html>

    容器.css: 
    div.container
    {
        border: 1px solid red;
        padding: 0px;
    }

    div.container img, div.container div 
    {
        border: 1px solid green;
        padding: 5px;
        margin: 5px;
        width: 64px;
        height: 64px;
        display: inline-block;
        vertical-align: top;
    }

    和 a.css、b.css、c.css 等:全部相同，只是更改颜色和 CSS 选择器。 
    .a
    {
        background: red url('../images/devil.png');
    }

    “目录”结构是:

    目录
    Directories

    这一切都来了，因为我不想将个别原始文件暴露给公众，特别是如果我想玩“less”过滤器或“sass”或类似...编译了一个。

    但是还有 好消息 .如果您不想在公共(public)目录中使用“备用 CSS”...请不要使用 --symlink 安装它们，但真的复制。一旦“assetic”构建了复合 CSS，您就可以从文件系统中删除原始 CSS，并保留图像:

    编译过程
    Compilation process

    请注意，我为 --env=prod 执行此操作环境。

    只是一些最后的想法:
  • 可以通过将图像放在 Git 中的“public”目录中来实现这种期望的行为。或 Mercurial和“assets”目录中的“css”。也就是说，与其将它们放在目录中所示的“公共(public)”中，不如想象 a、b、c...位于“ Assets ”而不是“公共(public)”中，而不是让您的安装程序/部署程序(可能是 Bash脚本)将 CSS 暂时放在“公共(public)”目录中 assets:install 之前被执行，然后 assets:install ，然后 assetic:dump ，然后在 assetic:dump 之后自动从公共(public)目录中删除 CSS已被处决。这将完全实现问题中所需的行为。
  • 另一个(如果可能的话未知)解决方案是探索“assets:install”是否只能将“public”作为来源，或者也可以将“assets”作为发布来源。当与 --symlink 一起安装时，这会有所帮助开发时的选项。
  • 此外，如果我们要从“公共(public)”目录中删除脚本，那么将它们存储在单独的目录(“ Assets ”)中的需要就消失了。它们可以存在于我们的版本控制系统中的“公共(public)”中，因为在向公众部署时会被删除。这也允许 --symlink用法。

    • 但无论如何，请注意:由于现在原件不再存在( rm -Rf )，因此只有两种解决方案，而不是三种。工作 div "B"不再工作，因为它是一个 Assets ()调用，假设有原始 Assets 。只有“C”(编译后的)会起作用。

    所以......只有一个最终的赢家:Div“C”完全符合主题中的要求:要编译，尊重图像的路径，不要向公众公开原始来源。

    获胜者是C

    The winner is C

    关于php - Symfony 2 中 CSS 文件中的资源路径，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9500573/

    32 4 0
    文章推荐： Scrape sofascore with python for info on team lineups and votes(使用蟒蛇获取有关球队阵容和投票的信息)
    文章推荐： java - 使用纬度经度计算两点之间的距离？
    文章推荐： c++ - 为什么 C++ 编译器不将此条件 bool 赋值优化为无条件赋值？
    文章推荐： java - 基于键对 HashMap 进行排序
    IT老高
    个人简介

    我是一名优秀的程序员,十分优秀！

    滴滴打车优惠券免费领取
    滴滴打车优惠券
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com