在Symfony 3中，我可以将图像存储在一个包中和Web之外/

Question

I am trying to learn Symfony and Twig but still have a lot to learn.

I am trying to insert svg images using Twig. This works but only with the image in web/images of AppBundle --<object id = "rotator" class="rotator" data = "{{ asset('images/clockwise.svg') }}" type = "image/svg+xml" ></object>

My problem is that I would prefer to store some images in separate bundles in “Resources/public/images” and not in web/images of AppBundle. The best practices page says: “Best Practice Store your assets in “web/” directory (of AppBundle).” I don’t know whether this “Best Practice” is an admonition or commandment.

My reason for wanting bundle storage is that I am writing lessons with images that will not be reused. There could be thousands or even tens-of-thousands of such lessons with images used only once or at least only used in their bundle. I want a separate bundle for each lesson or lesson subject. This would mean tens of thousands of bundles or even more.

To put all images in web/ of AppBundle would be like making all variables global. Some images don’t have global applicability. Some do. A chemistry lesson could have images of molecules and a history lesson could have images of George Washington. Most such images don’t need to mingle. I would prefer not to even have a symbolic link to such images in the “/web/image” directory of AppBundle. Each lesson bundle should be self-sufficient and ultimately storable intact in a database.

Every attempt that I have made to store an SVG image in the non-AppBundle bundle has resulted in a 404 error. I have not tried png or other image formats.

Is it possible to separate images from AppBundle and keep them in their own bundle?

If so, in what directory?

Must I use "bin/console assets:install" to put copies or symbolic links in /web/images of AppBundle?

Is the code in the second paragraph decent or are there better ways to accomplish the task.

Please excuse my lack of knowledge of the fundamentals.

jimfuqua

---

Keen, I modified the file and don't have the exact wording you requested but it was about like this:

{% image '@ClockwiseCounterclockwiseBundle/Resources/public/images/clockwise.svg' %}
    <img src='{{ asset_url}}' alt='rotating_clockwise' />
{%  endimage %}

This should have displayed a dynamic image rotating like a windmill. The SVG file is quite long.

I had an if statement running off a random number to select the clockwise SVG or counterclockwise SVG.

The image displayed as you said it would, but it was static. I thought that perhaps the SVG file had been escaped or otherwise modified. To test this premise, I right-clicked on the image and selected "Open image in a new tab". It opened and was dynamic. It was rotating as it should have in the new tab. I think that disproved that the image file was altered.

My next supposition was that Symfony took a snapshot of some sort of the page and displayed it in a static form. I did not know how to test that premise so I tried a different approach.

When I could not figure out the reason for the static image I loaded the SVG files directly into the if-else conditional. That works well but as the SVG files are very long that is a klutzy solution. Code folding helped, but it is still klutzy.

I am beginning to wonder if Symfony is suitable for my objective. That objective is to keep thousands or even tens of thousands of lessons in discrete pages or bundles in a database and display them as needed. Such quantities make mingling images,CSS files, and js files together in web/ not practical. The folder content would be huge. Would Drupal be a better choice or would I face the same Symfony issues there?

Thanks very much for your help.

Answer 1

Of course you can, all is explained in this document http://symfony.com/doc/current/assetic/asset_management.html

For your case, lets assume you have a bundle named AssetBundle.

If you want to store your images in this bundle and have them available in twig templates, you just need to put your images in the Resources/public folder.

Then just do as in the documentation :

{% image '@AssetBundle/Resources/public/images/clockwise.svg' %} 
<img src="{{ asset_url }}" alt="Clockwise" /> 
{% endimage %}

This will work as is in development environment because Assetic make available all assets using a specific controller but remember to dump your asset in production with php bin/console assetic:dump --env=prod

For a better understanding, read the whole documentation I've provided. It can be useful.