Symfony2 Path to image in twig template

Question

I store img in Acme/DemoBundle/Resources/public/img/weather_icon/blizzard.gif I want to put this img in my template so I did

<img src="{{ asset('bundles/acmedemo/img/weather_icons/blizzard.gif') }}" />

and

<img src="{{ asset('..img/weather_icons/blizzard.gif') }}"  />

and

And this did't work. I did assets:install and assetic:dump

Solved it worked

<img src="{{ asset('img/weather_icons/Blizzard.gif') }}" alt="Symfony!" />

Solution 1

Please try this

<img src="{{ asset('bundles/acmedemo/img/weather_icons/blizzard.gif') }}" />

You should istall your assets into web directory with the command

app/console assets:install web

Solution 2

You can use an image of a bundle:

{% image '@CoreBundle/Resources/public/images/your-image.jpg'  output="images/your-image.jpg" %}
<img src="{{ asset_url }}" width="100%" height="100%" alt="my alt of image" class="pull-left">
{% endimage %}

Solution 3

Assetic solution: You will get better performance with assetic as opposed to asset.

directory structure for example:

C:\xampp\htdocs\yourproject\src\AppBundle\Resources\public\images\yourimage.png

project structure for example:

yourproject\src\AppBundle\Resources\public\images\yourimage.png

in yourhtml.html.twig call:

{% image '@AppBundle/Resources/public/images/yourimage.png' %}
                    <img src="{{ asset_url }}" alt="Example" />
                {% endimage %}

NOTE:

This is providing you install assetic bundle which can be set in composer.json of the project as such:

"require": {
"php": ">=5.3.3",
"sensio/framework-extra-bundle": "~3.0",
"symfony/assetic-bundle": "~2.6", },

google for more instruction on installing assetic bundle symfony2.

that is it.

source:

http://symfony.com/doc/2.7/cookbook/assetic/asset_management.html#cookbook-assetic-cssrewrite

Comments

[Alain Tiemblo]

The first syntax is good. -- Some thoughts: check that the web/bundles/acmedemo/img/weather_icons/blizzard.gif file exists (a typo is easily made).

[Dung]

@konadrian: just to clarify that your answer is the usage Without Assetic, you just serve the files that are stored in the application directly. Using Assetic provides many advantages over directly serving the files. The files do not need to be stored where they are served from and can be drawn from various sources such as from within a bundle.