How to insert image in liveview?

[grangerelixx]

Hi,

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 %>
    <tr>
    <td><%= authors_list(post.id) %></td>
    </tr>
<% end %>

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

[mindok]

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 %>
    <tr>
    <td><img src={post.img_url} /></td>
    <td><%= authors_list(post.id) %></td>
    </tr>
<% 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?

[grangerelixx]

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

[grangerelixx]

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

[kokolegorille]

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?

[grangerelixx]

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

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

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.

[mindok]

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
  end

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 %>
    <tr>
      <td>
        <%= for author_string <- authors_list(post.id) do %>
          <img src={get_image_url(author_string)} />
        <% end %>
      </td>
    </tr>
<% end %>`

[grangerelixx]

I am almost there but there are

some issue with the images being displayed properly

[kokolegorille]

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

[grangerelixx]

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

[kokolegorille]

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.

@grangerelixx

    list = 
    Post.list_posts()
    |> Enum.map(fn {p_id, author_name} ->
      if p_id == post_id do
        author_name
      end
    end)
    |> Enum.reject(&(&1 == nil))

The authors_list returns a comma separated string?

@grangerelixx

      list
      |> Enum.sort()
      |> Enum.join(", ")

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

[grangerelixx]

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)

[kokolegorille]

@grangerelixx

What do you mean by doing with ecto?

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

This is the work of the database, not Elixir.