budji
Inserting html and SVGs
Greetings, complete newbie with phoenix/elixir and I’m getting a “assign @conn not available in eex template” error with the following code:
In templates/page
file: index.html.eex
<section class="content">
<%= render "_static-section.html" %>
</section>
file: _static-section.html.eex
<div class="card">
<div class="card-image">
<img src="<%= Routes.static_path(@conn, '/images/calendar.svg') %>" alt="Calendar">
</div>
</div>
The page works when removing the <%= render %> part from index.html.eex, so I’m doing something wrong in the _static-section.html.eex file, I just have no idea what I’m doing.
I’ve also tried: <%= render “_static-section.html”, conn: @conn %> but this one produces a different error altogether.
Here are the controller and view files:
page_controller.ex
defmodule Example.PageController do
use Example, :controller
def index(conn, _params) di
render(conn, "index.html")
end
end
page_view.ex
defmodule Example.PageView do
use Example, :view
end
TIA
EDIT: Sorry the code didn’t render correctly the first time, fixed.
Marked As Solved
idi527
You have a charlist in your static path, try changing it to a binary.
<div class="card">
<div class="card-image">
- <img src="<%= Routes.static_path(@conn, '/images/calendar.svg') %>" alt="Calendar">
+ <img src="<%= Routes.static_path(@conn, "/images/calendar.svg") %>" alt="Calendar">
</div>
</div>
<%= render "_static-section.html", conn: @conn %> in index.html.eex should probably work after that change.
Also Liked
idi527
BTW, if I wanted to say, include the actual SVG code instead of using an
<img>tag, what would be the correct way to go about it? Sort of like in PHP where<?php include "/images/sample.svg"; ?>?
I don’t know if there is any idiomatic approach to working with SVG in phoenix, but if I knew that the image is very unlikely to change I’d do the following:
I’d make a function in my view with the SVG like
defmodule MyApp.SomeView do
use Web, :view
sample_svg = File.read!("priv/static/images/sample.svg")
@spec sample_svg :: binary
def sample_svg do
unquote(sample_svg)
end
end
This would read the svg at compile time and “persist” it in a function. This way the function just outputs the svg contents (as they were at compile time) any time it is called.
In my EEx templates I’d be able to do the following then:
...
<%= MyApp.SomeView.sample_svg() %>
...
Another (probably easier) approach would be to turn the svg into an EEx template.
I’d create a new _sample.svg.eex (or sample_svg.html.eex if the previous one doesn’t work) with the contents of priv/static/images/sample.svg (that one could be deleted then, since it’s been replaced by the eex template) and call <%= render "_sample.svg" %> from within my other EEx templates.
peerreynders
FYI: Phoenix Inline SVG
idi527
![]()
Can you post that error?
Can you also maybe post the contents of _static-section.html.eex?
Popular in Questions
Other popular topics
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
- #javascript
- #code-sync
- #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








