3

As explained in the official Symfony2 docs, in a Twig template one can link to an asset as follows:

<img src="{{ asset('images/logo.png') }}" alt="My logo" />

which will render the right path to the logo.png resource (it depends on the folder where the Symfony2 app lives).

Well, suppose to use a Javascript code that has to load an image at runtime (e.g. as a result from an autocomplete), how can one achieve in Javascript the same result provided by asset function in Twig?

Some note:

  1. Maybe exists something like the FOSJsRoutingBundle, but I really ignore it!
  2. A dirty way could be to generate the path for a known resource, e.g. the logo.png file <script>var known = {{asset('images/logo.png)')}}</script> and so retrieve the path by a string replace on variable known by replacing string images/logo.png with an empty one. But it is a dirty way!
Improve this question

3 Answers 3

Reset to default
4

You can just remove the file name from the asset function to get an absolute path to a directory:

<script>
    var imgDir = {{ asset('images/') }}
</script>
Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

@JeanValjean yes, but instead of outputting a path to a file and stripping the file name, I suggest that you can use the asset function to get a path to a directory too. That means you don't need to strip the filename and that makes this not 'dirty'
Well, I tested it and it really works! Both answers are right, but this one deserve to be the accepted one, since it relies on a truly Symfony-based solution and doesn't require a specific knowledge of the folders' structure on the production server.
"Give to Caesar what belongs to Caesar" -- Stackoverflow should be a mine of good things, who makes a question has the responsibility to check the correctness of what marked as accepted!
If you use assets_version (symfony.com/fr/doc/current/reference/configuration/…) you have to remove the last part with the version.
1

It is very likely, that the path from your js file to your image remains invariable. This gives you a possibility to use a 'hardcoded' path in your javascript file.

Example:

web
 |
 |--js
 |   |
 |   |--foo.js
 |
 |--images
 |   |
 |   |--pic.jpg

In this case, you can access pic.jpg from foo.js by ../images/pic.jpg Note, that this solution won't work in your twig view, because in your twig view relative asset urls depend on the route url. This is the reason you need the asset function.

Improve this answer

1 Comment

It seems to work. But honestly I tested it in locale and for only one page. I should check it in more pages. +1 and accepted answer until one has proof to the contrary!
0

Twig can render JS files not only HTML. You can create a Twig template which will return the JS file with all the script you need. You can then use all of the Twig's functionality in this script file.

Improve this answer

1 Comment

This is far from my aims! In a JS file I load at runtime the images, I don't know at priori which image will be loaded, nor I belive that returning JS files is a good idea when I can simply return a JSON object (less bytes is better!)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.