budji

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

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

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.

idi527

idi527

:waving_hand:

Can you post that error?

Can you also maybe post the contents of _static-section.html.eex?

Where Next?

Popular in Questions Top

gshaw
What is the idiomatic way of matching for not nil in Elixir? E.g., First way: defp halt_if_not_signed_in(conn, signed_in_account) when...
New
electic
Hi, I am new to Elixir. I am trying to use the DateTime component to insert a date into MySQL however the there seems to be no way to fo...
New
minhajuddin
I have seen a lot of code which picks the first element from a list using Enum.at(0) instead of List.first. Is there a reason why people ...
New
earth10
Hi, I’m just starting to build a side-project with Elixir and Phoenix and doing some basic test with Elixir alone. What strikes me is th...
New
ycv005
I have followed this StackOverflow post to install the specific version of Erlang. And When I am running mix ecto.setup then getting fol...
New
jay1
Why is it that the mnesia database isn’t the most preferred database for use in Elixir/Phoenix?
New
belgoros
I’m not a pro in using Regex and can’t figure out why the following behaviour happens, especially if we take into account the difference ...
New
script
If I have a string “1000 cfu/ml” . I want to remove the characters and / and space . So the string is like this "1000" What is the ...
New
nsuchy
Hi. I’ve noticed that Windows Powershell has it’s own IEX command and you cannot access Elixir’s IEX due to the conflict. This isn’t a cr...
New
jononomo
For some reason my phoenix channels are working for me in my local dev environment, but as soon as I deploy via Docker, I get a 403 error...
New

Other popular topics Top

marius95
Hello everyone, I try to use an Javascript Event Handler in my root.html.leex file. Therefore I created a function in the app.js file: ...
New
electic
Hi, I am new to Elixir. I am trying to use the DateTime component to insert a date into MySQL however the there seems to be no way to fo...
New
jerry
Good day to you all. I have been struggling to get a query involving like and ilike to work. Can anyone assist me on this, please? pro...
New
josevalim
Hi everyone, One of the features added to Elixir early on to help integration with Erlang code was the idea of overridable function defi...
New
alice
Hey, Just curious what are the main benefits of Elixir compared to Clojure? When is Elixir more useful than Clojure and vice versa? Th...
New
jason.o
In the code below, if the create action is not set to accept “extra_key” as an input, it errors out with a message shown above. Is there ...
New
dblack
I’ve got an issue with an app and I’ve no idea of how to troubleshoot it. I’m hoping someone here might have seen something similar. I p...
New
boundedvariable
I am going through the kafka architecture. All the features what the kafka is providing are already in Erlang. I would like hear your opi...
New
marick
I had some trouble figuring out how to make many-to-many associations work. Once I got it working, I wrote a blog post. Because I’m a nov...
New
Qqwy
Update: How to use the Blogs &amp; Podcasts section You can post links to your blog posts or podcasts either in one of the Official Blog...
3271 126479 1222
New

We're in Beta

About us Mission Statement