How to insert image in liveview?


how can one add image (png format) as icon in heex or .ex file?

I have the images in priv/static.

Also, I have an array of elements and each element map with an image. How to do that from heex or .ex file?

<%= for post <- @posts do %>
    <td><%= authors_list( %></td>
<% end %>

This function is from .ex authors_list( and returns a list of strings

Hi @grangerelixx - it wasn’t totally clear to me what you are asking, but to show an image in heex would be something like:

<%= for post <- @posts do %>
    <td><img src={post.img_url} /></td>
    <td><%= authors_list( %></td>
<% end %>

I’m not sure what you’re asking in the second part of the question. Are you trying to lookup an image name for each string in the list and display it?

Yes, that’s right. For each string, I wanna show different images

Also, do you mind explaining how I can obtain and use img_url?

You should show the code of authors_list…

By the way it might be interesting to know which version of Phoenix. As there are some changes recently

You put the images in priv/static? Are You sure plug static is configured to serve these? It should be priv/static/images or …assets, depending on Phoenix version

How do You assign image url? => What is your way of linking these images to authors?

def authors_list(post_id) do
    list = 
    |> {p_id, author_name} ->
      if p_id == post_id do
    |> Enum.reject(&(&1 == nil))

if list == [] do
      |> Enum.sort()
      |> Enum.join(", ")

I currently use phoenix 1.6.15. Yes I put under priv/static.

I am thinking of using a case block to map the images to authors as my dataset is very small now.

So you need to define a function that converts the string to the image URL. For example

  def get_image_url(author_string) do
    "/images/author_#{author_string}.png" # or whatever

Probably the best place is in the module that authors_list is defined.

Then you can use it in the heex:

<%= for post <- @posts do %>
        <%= for author_string <- authors_list( do %>
          <img src={get_image_url(author_string)} />
        <% end %>
<% end %>`

I am almost there but there are
Screen Shot 2023-02-07 at 7.26.13 PM
some issue with the images being displayed properly

If You put the images at the root of priv/static, they are not going to be served…

no, I moved them inside priv/static/images. Still same error. Also tried moving inside priv/static/assets but didnt work

You can check in your endpoint.ex the Plug Static config…

I have something like this,

  plug Plug.Static,
    only: ~w(assets fonts images favicon.ico robots.txt)

You should try to do this with Ecto, it should be faster, with less data transfered.

The authors_list returns a comma separated string?

Check the network tab of your browser dev tools, check the name are equal to your image, name and path.

The image urls and name of the authors in sync.

I am new to this concept and not able to wrap my mind around. What do you mean by doing with ecto?

my endpoint.ex looks same as yours

plug Plug.Static,
    at: "/",
    from: :blog,
    gzip: false,
    only: ~w(assets fonts images favicon.ico robots.txt)

You select all Post, then filter in Elixir for id==post_id.

This is the work of the database, not Elixir.