DEV Community

Will Ceolin
Will Ceolin

Posted on • Updated on

How to add a link to an image in Phoenix

#elixir #phoenix

Edit (2023-05-11): This is much simpler in Phoenix 1.7+ thanks to Verified Routes:

<.link navigate={~p"/post/123"}>
  <img src={~p"/images/logo.png"} alt="Logo" />
</.link>
Enter fullscreen mode Exit fullscreen mode

Let's say you have an image and you want to link it to another route in the Phoenix Framework. You can use link/2 with a code block to accomplish that:

<%= link to: Routes.page_path(@conn, :index) do %>
  <img src={Routes.static_path(@conn, "/images/phoenix.png")} alt="Phoenix Framework Logo"/>
<% end %>
Enter fullscreen mode Exit fullscreen mode

In the example above, we'll link the Phoenix logo (phoenix.png) to the home page.

Top comments (2)

Collapse
 
astrogreg profile image
Greg •

This does not work

use this:

 <%= link to: "/" do %>
  <img src="/images/Logo_tekst.png" alt="" class="h-10 w-auto lg:h-12"/>
  <% end %>
Enter fullscreen mode Exit fullscreen mode
Collapse
 
wceolin profile image
Will Ceolin •

Thanks, I had forgotten the do part after link to:. Fixed now.

Read next

calvinmclean profile image

Let's Talk About REST...

Calvin McLean -

zeeve profile image

Zeeve teams up with XODE for a successful launch of their fully managed Gaming Parachain on Kusama

Zeeve -

onwritinggames profile image

second person

Fran Tufro -

arindam0310018 profile image

Hashi Packer with Azure Devops

Arindam Mitra -