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

New
skosch
To my knowledge, put_in, Map.update etc. all have the one limitation of not automatically creating intermediate keys when needed (for exa...
New
JorisKok
I have a server on AWS, and was running a load test using artillery. When looking at the Phoenix dashboard I see the Ports going to 100% ...
New
stefanchrobot
What’s the safe way to decode a JSON string into a struct? I want to avoid calling String.to_atom. Jason.decode can give me a map with st...
New
joeerl
Hello again - after a longish gap I’ve decided I really must dig into Elixir and see what’s been happening here - so I have a few questio...
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
ashish173
I am using Ecto timestamps with postgres, I can see the timestamps() use the :naive_dateime but for my use case I wanted to store the ti...
New
hariharasudhan94
I would like to know what is the best IDE for elixir development?
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
svb
Hi! Currently I want to submit a form by pressing the Enter key. However, since my input field is of type “textarea” this is just adds a...
New

Other popular topics Top

9mm
I am constructing a JSON object (map) and I need to conditionally set a field. I’m trying to write proper elixir-way code… and I’m at a l...
New
siddhant3030
Hi, I have to write a raw query for one of my project. But till now I have used ecto queries and don’t have much experience writing raw ...
New
lastday4you
I wanted to check elixir version in phoenix because i found that my elixir is 1.5 but when i use Enum.chunk_by it said the function is un...
New
chrismccord
Phoenix 1.4.0 released Phoenix 1.4 is out! This release ships with exciting new features, most notably with HTTP2 support, improved deve...
688 30877 112
New
JorisKok
I have a server on AWS, and was running a load test using artillery. When looking at the Phoenix dashboard I see the Ports going to 100% ...
New
joeerl
Hello again - after a longish gap I’ve decided I really must dig into Elixir and see what’s been happening here - so I have a few questio...
New
Emily
I have VueJS GUIs with the project generated using Webpack. I have Elixir modules that will need to be used by the VueJS GUIs. I forese...
New
aalberti333
As the title describes, I’m trying to run Enum.map() over a list of key/value pairs, where the value is a map. My data looks like this: ...
New
sergio_101
I am VERY much an elixir newbie. I have taken one elixir course and one phoenix course on Udemy. During that course, I saw the instructor...
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

We're in Beta

About us Mission Statement