Assetic (with Symfony 2) changes the name of image files when 'assetic:dump' is run

Question

Whenever I run the command php app/console assetic:dump all of my assets (css, javascripts, images) are successfully placed into the web/ folder. The only issue I'm encountering is that Assetic changes the image file names, presumably for cache busting purposes, which interferes with images referenced in my css files.

When I manually place the image in web/images/masthead-4.jpg, it shows up correctly. I'd like to keep the cache busting on the images if possible. I would prefer to get one of these solutions working:

• I use the processed image in my css rule, such as

  .is--site_landing { background: transparent url('../images/d755b65-aa84794_masthead-4_1-86f4322.jpg') top center no-repeat; background-size: cover; }

• Get the images to transfer from app/Resources/public/images into web/images without having Assetic change the name of the file?

My images are located in %kernel.root_dir%/app/Resources/public/images. For instance, say I have a file %kernel.root_dir%/app/Resources/public/images/masthead-4.jpg.

---

The output of php app/console assetic:dump for the image file is:

20:22:40 [file+] /our_stuff/admin/symfony/app/../web/images/d755b65-aa84794.jpg
20:22:40 [file+] /our_stuff/admin/symfony/app/../web/images/d755b65-aa84794_masthead-4_1-86f4322.jpg

Now that the file is named d755b65-aa84794_masthead-4_1-86f4322.jpg or d755b65-aa84794.jpg my background-image css rule isn't finding the image.

---

My background CSS rule located in %kernel.root_dir%/app/Resources/public/images

    .is--site_landing {
      background: transparent url('../images/masthead-4.jpg') top center no-repeat;
      background-size: cover;
    }

---

My header in my Twig layout file:

{% stylesheets
  'css/style.css.scss'
  filter='cssrewrite'
%}
<link rel="stylesheet" href="{{ asset_url }}">
{% endstylesheets %}

{% javascripts
  'js/jquery-1.11.2.min.js'
%}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}  

{%image 
  'images/masthead-4.jpg'
%}
{% endimage %}

More information: I'm running:

• PHP 5.3.3
• Symfony 3.3
• assetic-bundle ~2.3

Answer 1

Assetic are made for processing assets. Don't use it for the images if you don't like it to process yours images.

First, remove that, you don't need it.

{%image 
  'images/masthead-4.jpg'
%}
{% endimage %}

Next, use php app/console assets:install --symlink for creating the symlink in the web folder. Like that, your CSS file can access the image file.