MatijaL
How to use versioned file in my template?
Hello,
I have icons.svg file which contains svg symbols. In my template I use it like this with a verified route:
<svg>
<use xlink:href={ ~p"/images/icons.svg#arrow" }></use>
</svg>
This line of code always calls for icons.svg file, but in production, this file gets versioned to something like icons-83f2a9a213b74424476fb160bbabaec8.svg?vsn=d.
How do I update verified routes to use versioned filename instead of base icons.svg?
Marked As Solved
psantos
Maybe Routes.static_path/2 would help.
<svg>
<use xlink:href={static_path(@conn, "/images/icons.svg") <> "#arrow"}></use>
</svg>
In development static_path/2 will return icons.svg but in production it will return the path to the fingerprinted version.
Also Liked
LostKobrakai
Looking at the code it seems the #arrow part means matching with the cache manifest doesn’t work. Caching uses the path as supplied and doesn’t strip fragments from it, which therefore doesn’t match paths on the filesystem, which don’t have fragments to them.
MatijaL
Thank you for giving me the example.
Here’s the code with verified route which works.
<svg>
<use xlink:href={ ~p"/images/icons.svg" <> "#arrow" }></use>
</svg>
Popular in Questions
Other popular topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
Phoenix, LiveView, multimedia pipelines, distributed systems. 400 engineers, Elixir since 2017. Available for hire.
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #phoenix_html
- #iex
- #blog-post
- #graphql
- #genstage
- #ai
- #websockets
- #supervisor
- #advent-of-code
- #elixirconf-us
- #distillery
- #processes
- #forms
- #api
- #metaprogramming
- #security
- #performance
Our Sponsors
Build Elixir applications with speed and confidence.
Supporting innovation across the BEAM ecosystem.
We build reliable cloud platforms for business-critical systems.
Catch errors, track performance, monitor hosts and more.
Real-time error tracking, performance insights, and observability for devs.
Practical resources that improve the lives of professional developers.
Producing high quality Elixir screencasts since 2017.
Enabling companies to succeed by building software people love.
The team behind Membrane, Popcorn, LiveDebugger. Available for hire.
Courses that'll move you from confusion to "Aha, now I get it!"