aswinmohanme
I started a project with Pheonix 1.6 rc. Everything is going great and the new esbuild pipeline is so fast and a joy to work with. I cannot find out how to display an hero image on home screen.
I added the file to assets/static/images/hero-image.svg here is my image tag
<img class="rounded-2xl" src="/images/hero-image.svg">
I have added the SVG loader to esbuild in config.exs
config :esbuild,
version: "0.12.18",
default: [
args:
~w(js/app.js js/draft-editor.js js/book-long-description-html-editor.js js/chapter-render.js static/fonts/fonts.css --bundle --loader:.otf=file --loader:.svg=file --target=es2016 --outdir=../priv/static/assets),
cd: Path.expand("../assets", __DIR__),
env: %{"NODE_PATH" => Path.expand("../deps", __DIR__)}
]
What am I doing wrong ? How do I get the image to be displayed on home screen ? Thanks
Where Next?
Trending in Discussions
Other Trending Topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
Elixir, Erlang & messaging conferences from Code Sync. Next up: ElixirConf US (10–11 Sep) & Code BEAM Europe (21–22 Oct), Haarlem + online.
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #library
- #deployment
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #elixirconf
- #channels
- #exunit
- #discussion
- #code-sync
- #podcasts
- #javascript
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #ai
- #elixirconf-us
- #blog-post
- #elixir-ls
- #phoenix_html
- #iex
- #graphql
- #genstage
- #websockets
- #supervisor
- #advent-of-code
- #distillery
- #processes
- #api
- #forms
- #hex
- #security
- #metaprogramming
Our Sponsors
Supporting innovation across the BEAM ecosystem.
We build reliable cloud platforms for business-critical systems.
Catch errors, track performance, monitor hosts and more.
Error tracking, logs, uptime, and Just Enough APM. Built for developers.
Elixir, Erlang & BEAM conferences from Code Sync - join us in 2026!
Practical resources that improve the lives of professional developers.
Master modern tools, write cleaner code, and tackle real-world challenges.
**Building the future of software with AI, trust, and human connection.**
The team behind Membrane, Popcorn, LiveDebugger. Available for hire.
Courses that'll move you from confusion to "Aha, now I get it!"
Showing Posts 1 to 3- Show Best Posts
- Show All (oldest first)
- Show All (newest first)
nikolauska
Are you importing that svg file in the javascript code or just using it in the src? If you’re not importing image in the code it won’t be build, but will just be a regular static file that needs to be copied separately to
priv/staticfolder. With the new esbuild setup there is no longer automatic copying fromassets/statictopriv/staticso you need to move them there for them to work.aswinmohanme
Yes that was the issue, I put the image in
priv/static/imagesand it worked like a charm. Thanksthiagomajesk
@aswinmohanme If you still want to keep using Esbuild because it’s fast but want a little less hustle to configure everything else (like the old default experience), try configuring Vite in your asset pipeline - compared to Webpack it’s a piece of cake, and you’ll get asset copying working as per usual.