404 error from css asset was called in dev

Question

I do not understand why, but images of my bundle are not properly called because of Assetic. I try to get it with:

background-image: url('../images/bg-header-1.jpg');

in my VisualImmersion/SiteBundle/Resources/public/css/home.css, and my image in: VisualImmersion/SiteBundle/Resources/public/images/bg-header-1.jpg

I think i use good method for assetic in my general layout:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta name="robots" content="follow">
        <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no'/>
        <title>{% block title %} Visual Immersion - Agence de communication {% endblock %}</title>
        <meta name="description" content="Agence de communication | Développement web - Référencement SEO / Adwords - Développement mobile / tablettes - Brand design - Community Management - Evènementiel ">
        <link rel="icon" type="image/png" href="{{ asset('css/images/favicon.png') }}"/>
        {% stylesheets filter= 'cssrewrite'
            'css/stylesheets/layout.css'
            'css/stylesheets/style.css'
            'css/stylesheets/font.css'
            'css/stylesheets/responsive.css'
            'css/stylesheets/personalized-responsive.css'
            '@VisualImmersionSiteBundle/Resources/public/css/*'
        %}
            <link rel="stylesheet" type="text/css" href="{{ asset_url }}">

        {% endstylesheets %}
        {% block javascripts %}
            <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
            <script src="http://twitterjs.googlecode.com/svn/trunk/src/twitter.min.js"></script>
            <script>
                (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
                    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
                        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
                })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

                ga('create', 'UA-41814706-1', 'visual-immersion.com');
                ga('send', 'pageview');

            </script>
        {% endblock %}
    </head>

But no image...

thank you in advance for your help

Edit: My dev_config.yml

imports:
    - { resource: config.yml }

framework:
    router:
        resource: "%kernel.root_dir%/config/routing_dev.yml"
        strict_requirements: true
    profiler: { only_exceptions: false }

web_profiler:
    toolbar: true
    intercept_redirects: false

monolog:
    handlers:
        main:
            type:  stream
            path:  %kernel.logs_dir%/%kernel.environment%.log
            level: debug
        firephp:
            type:  firephp
            level: info
        chromephp:
            type:  chromephp
            level: info

assetic:
    use_controller: true
    filters:
        cssrewrite: ~

That is my 6de3e66_part_6_home_1.css:

background-image: url('../../Resources/public/images/bg-header-1.jpg');

Your CSS points to a folder called "images" (plural): background-image: url('../images/bg-header-1.jpg'); But the actual path is "image" (singular) — HaukurHaf, Nov 07 '13 at 22:30
Hello, bad copy / paste, my directory is images. Sorry for this error. I edited it. — MeursaultF, Nov 07 '13 at 22:53
@PeterBailey i did cache:clear command, assets:install and assetic:dump. No more success. — MeursaultF, Nov 07 '13 at 22:54
Do you have any other filters being applied globally in your `config.yml`? — Ken Hannel, Nov 07 '13 at 23:47
Try to paste the image where the css file exist, and doing something like this: background-image: url('images/bg-header-1.jpg') — Jesús Quintana, Nov 08 '13 at 00:26
any addons with your browser? adblock plus sometimes blocks sites based on regex. you might need to whitelist the file — Michael, Nov 08 '13 at 00:26
@Michael Nope, i have not addons, and tested it on firefox, opera, safari & chrome. — MeursaultF, Nov 08 '13 at 00:44
Is it possible that the probleme is rights rules ? -rw-r--r-- for my image — MeursaultF, Nov 08 '13 at 00:49
Try this solutions maybe must work: http://stackoverflow.com/questions/7044631/symfony2-assetic-load-images-in-css — Jesús Quintana, Nov 08 '13 at 00:50
No more success :s ( i did cache:clear, assets:install and assetic:dump --env=dev) — MeursaultF, Nov 08 '13 at 01:07
But you use the cssrewrite filter mentioned in the solution above? — Jesús Quintana, Nov 08 '13 at 01:10
When you open the `home.css` file directly in the browser (eg `http://devbox/app_dev.php/css/cd5ada6_home_1.css`) does it show any assetic errors anywhere? — Ken Hannel, Nov 08 '13 at 01:54
@KenHannel yes ! i have this line: background-image: url('../../Resources/public/images/bg-header-1.jpg'); and the error: cannot resolve directory 'public" — MeursaultF, Nov 08 '13 at 12:30
i added my 6de3e66_part_6_home_1.css content on edit initial post. — MeursaultF, Nov 08 '13 at 12:55
I ask myself a question: given the fact that I'm dev mode, am I really have to start Assetic command: dump? In principle, the use_controller to true in my config_dev.yml should allow me to not have to do it, right? — MeursaultF, Nov 08 '13 at 13:40

score 0 · Answer 1 · edited May 23 '17 at 11:53

0

check my answer here CSS/JS/Images from Bundle location will be always removed after composer.phar update

I explained how to use the Resources/public directory to manage asset such as images.

edited May 23 '17 at 11:53

Community

1
1

answered Nov 08 '13 at 12:31

tyko

96
4

Hi, I had this setup in my composing. And assets: install - symlink, I did from the start. It is only with these concerns, I decided to revive the asset command: install to be on. – MeursaultF Nov 08 '13 at 12:50

score 0 · Answer 2 · answered Nov 08 '13 at 16:11

Ok i did some tests:

I removed cssrewrite to my config_dev.yml. that it:

imports:
    - { resource: config.yml }

framework:
    router:
        resource: "%kernel.root_dir%/config/routing_dev.yml"
        strict_requirements: true
    profiler: { only_exceptions: false }

web_profiler:
    toolbar: true
    intercept_redirects: false

monolog:
    handlers:
        main:
            type:  stream
            path:  %kernel.logs_dir%/%kernel.environment%.log
            level: debug
        firephp:
            type:  firephp
            level: info
        chromephp:
            type:  chromephp
            level: info

assetic:
    use_controller: true

i moved annotation out of cssrewrite filter in my general layout:

{% stylesheets '@VisualImmersionSiteBundle/Resources/public/css/*'  filter='cssrewrite'
    'css/stylesheets/layout.css'
    'css/stylesheets/style.css'
    'css/stylesheets/font.css'
    'css/stylesheets/responsive.css'
    'css/stylesheets/personalized-responsive.css'
%}
    <link rel="stylesheet" type="text/css" href="{{ asset_url }}">

{% endstylesheets %}

i changed asset path in my css to:

background-image: url('/bundles/visualimmersionsite/images/bg-header-1.jpg');

and it works !

But my question is: Now it's work on dev env, ok, nice. But this approach does pose problems when I pass in a production environment?

404 error from css asset was called in dev

2 Answers2