Where to place images in assetic when references from javascript

Question

I am using assetic in Symfony 2. I have JavaScript and CSS loaded using assetic.

I need to reference some images in one of my JS files. I am new to assetic, and cannot find any documentation on this at all. The images currently reside in my bundle (/src/Vendor/BundleName/Resources/img/chair.jpg for example).

I see one major pitfall here: How would assetic have any idea what the image path is? As far as it's concerned it's just a string in a JS file. So, do I need to define that image path somewhere else or do I reference it in a different way within the JavaScript?

Or am I to not use assetic at all and just throw my images into the public directory (web by default)? I'm guessing not.

Answer 1

You should then use JmikolaJsAssetsHelperBundle.

which allows you to expose the AssetsHelper service from Symfony2's templating component to JavaScript.

It supports both relative and absolute asset URI(s).

Example,

Once configured, the bundle creates a AssetsHelper global variable within your javascript. It allows you then to call a getUrl() helper to build your asset path as follow,

'<img src="' + AssetsHelper.getUrl('/images/yourImage.png') + '">';