aswinmohanme
Phoenix 1.6 rc cannot find static svg image
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
Marked As Solved
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/static folder. With the new esbuild setup there is no longer automatic copying from assets/static to priv/static so you need to move them there for them to work.
Also Liked
thiagomajesk
@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.
Last Post!
thiagomajesk
@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.
Popular in Discussions
Other popular topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
Producing high quality Elixir screencasts since 2017.
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
- #elixirconf-us
- #advent-of-code
- #distillery
- #processes
- #forms
- #api
- #metaprogramming
- #security
- #hex
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.
Error tracking for Elixir devs who love to ship. Start your free account.
Producing high quality Elixir screencasts since 2017.
Enabling companies to succeed by building software people love.
The deployment platform built for Elixir: PaaS ease, VPS control.
The team behind Membrane, Popcorn, LiveDebugger. Available for hire.
Courses that'll move you from confusion to "Aha, now I get it!"