@@ -12,7 +12,7 @@ The component has two main features:
12
12
* :ref: `Mapping & Versioning Assets <mapping-assets >`: All files inside of ``assets/ ``
13
13
are made available publicly and **versioned **. You can reference the file
14
14
``assets/images/product.jpg `` in a Twig template with ``{{ asset('images/product.jpg') }} ``.
15
- The final URL will include a version hash, like ``/assets/images/product-3c16d9220694c0e56d8648f25e6035e9 .jpg ``.
15
+ The final URL will include a version hash, like ``/assets/images/product-3c16d92m .jpg ``.
16
16
17
17
* :ref: `Importmaps <importmaps-javascript >`: A native browser feature that makes it easier
18
18
to use the JavaScript ``import `` statement (e.g. ``import { Modal } from 'bootstrap' ``)
@@ -70,15 +70,15 @@ The path - ``images/duck.png`` - is relative to your mapped directory (``assets/
70
70
This is known as the **logical path ** to your asset.
71
71
72
72
If you look at the HTML in your page, the URL will be something
73
- like: ``/assets/images/duck-3c16d9220694c0e56d8648f25e6035e9 .png ``. If you change
73
+ like: ``/assets/images/duck-3c16d92m .png ``. If you change
74
74
the file, the version part of the URL will also change automatically.
75
75
76
76
.. _asset-mapper-compile-assets :
77
77
78
78
Serving Assets in dev vs prod
79
79
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
80
80
81
- In the ``dev `` environment, the URL ``/assets/images/duck-3c16d9220694c0e56d8648f25e6035e9 .png ``
81
+ In the ``dev `` environment, the URL ``/assets/images/duck-3c16d92m .png ``
82
82
is handled and returned by your Symfony app.
83
83
84
84
For the ``prod `` environment, before deploy, you should run:
@@ -283,9 +283,9 @@ outputs an `importmap`_:
283
283
284
284
<script type =" importmap" >{
285
285
" imports" : {
286
- " app" : " /assets/app-4e986c1a2318dd050b1d47db8d856278 .js" ,
287
- " /assets/duck.js" : " /assets/duck-1b7a64b3b3d31219c262cf72521a5267 .js" ,
288
- " bootstrap" : " /assets/vendor/bootstrap/bootstrap.index-f0935445d9c6022100863214b519a1f2 .js"
286
+ " app" : " /assets/app-4e986c1a .js" ,
287
+ " /assets/duck.js" : " /assets/duck-1b7a64b3 .js" ,
288
+ " bootstrap" : " /assets/vendor/bootstrap/bootstrap.index-f093544d .js"
289
289
}
290
290
} </script >
291
291
@@ -342,8 +342,8 @@ The ``importmap()`` function also outputs a set of "preloads":
342
342
343
343
.. code-block :: html
344
344
345
- <link rel =" modulepreload" href =" /assets/app-4e986c1a2318dd050b1d47db8d856278 .js" >
346
- <link rel =" modulepreload" href =" /assets/duck-1b7a64b3b3d31219c262cf72521a5267 .js" >
345
+ <link rel =" modulepreload" href =" /assets/app-4e986c1a .js" >
346
+ <link rel =" modulepreload" href =" /assets/duck-1b7a64b3 .js" >
347
347
348
348
This is a performance optimization and you can learn more about below
349
349
in :ref: `Performance: Add Preloading <performance-preloading >`.
@@ -494,9 +494,9 @@ for ``duck.png``:
494
494
495
495
.. code-block :: css
496
496
497
- /* public/assets/styles/app-3c16d9220694c0e56d8648f25e6035e9 .css */
497
+ /* public/assets/styles/app-3c16d92m .css */
498
498
.quack {
499
- background-image : url (' ../images/duck-3c16d9220694c0e56d8648f25e6035e9 .png' );
499
+ background-image : url (' ../images/duck-3c16d92m .png' );
500
500
}
501
501
502
502
.. _asset-mapper-tailwind :
@@ -573,7 +573,7 @@ Sometimes a JavaScript file you're importing (e.g. ``import './duck.js'``),
573
573
or a CSS/image file you're referencing won't be found, and you'll see a 404
574
574
error in your browser's console. You'll also notice that the 404 URL is missing
575
575
the version hash in the filename (e.g. a 404 to ``/assets/duck.js `` instead of
576
- a path like ``/assets/duck.1b7a64b3b3d31219c262cf72521a5267 .js ``).
576
+ a path like ``/assets/duck-1b7a64b3 .js ``).
577
577
578
578
This is usually because the path is wrong. If you're referencing the file
579
579
directly in a Twig template:
@@ -901,7 +901,7 @@ be versioned! It will output something like:
901
901
902
902
.. code-block :: html+twig
903
903
904
- <link rel="stylesheet" href="/assets/bundles/babdevpagerfanta/css/pagerfanta-ea64fc9c55f8394e696554f8aeb81a8e .css">
904
+ <link rel="stylesheet" href="/assets/bundles/babdevpagerfanta/css/pagerfanta-ea64fc9c .css">
905
905
906
906
Overriding 3rd-Party Assets
907
907
~~~~~~~~~~~~~~~~~~~~~~~~~~~
0 commit comments