vegabook
How to serve an img with Phoenix?
I’m brand new to Phoenix and I have stripped one of the demo applications to the bone. I just want to get an svg up on the screen. Here is what my /web/templates/page/index.html.eex looks like:
<div class=whitext>
<h2><%= gettext ">>> %{name}", name: "CRVM" %></h2>
<p> A new perspective on fixed income relative value.</p>
</div>
<div>
<p> hello </p>
<img src="/web/static/assets/images/crvmlogowhite.svg"/>
</div>
But nothing is showing up (though “hello” is). So a) what is the canonical way of putting an image onto a page in Elixir, and b) if the above is okay, how is the image referenced? By the way I have tried multiple versions of the path. If I use it as a css background then url(“/images/crvmlogowhite.svg”) does work.
Most Liked
alexgaribay
Your static assets can be served by using the static_path routes. You’ll want to use src instead of source attribute for the file source for your image. But here’s how it should look:
<img src="<%= static_path(@conn, "/images/crvmlogowhite.svg") %>">
Keep in mind with the default configuration of brunch, your asset files are copied to priv/static/ and are served from there. Your endpoint.ex file defines what static files should be served from that directory.
andrejsm
Everything under priv/static is served from /. To link to priv/static/images/photo.jpg in CSS you write url(/images/photo.jpg).
You don’t need to use static_path obligatory. If you are configuring to serve assets from a CDN, then yes, you would need to simplify the development process.
Popular in Questions
Other popular topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
Catch errors, track performance, monitor hosts and more.
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.
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!"