Render imagem once time in browser - LiveView

I have an @card, which has an image value which I leave printed on src = “”, but every time I do an action with @card ( for exemple i have a event to move a card).

def handle_event(
        "move_card",
        %{
          "data" => %{
            "card_id" => id,
            "to_list" => lis_id,
            "to_position" => pos
          }
        } = params,
        socket
      ) do

    card =
      Admin.get_card!(id)

     Admin.update_card(card, %{list_id: list_id, position: pos, new: false})

    {:noreply,
     assign(socket,
       cards: current_lists(socket),
     )}
end

it renders the image inside card again. Is there any way to get my @card.img to be rendered only once, so that it doesn’t accumulate memory every time I do an action?

Can you share your template? Do you have DOM ids on the containers that you are moving around?

1 Like

Around my cardcomponent i have a DOM that has ID

 <% dom_id_list = "list" <> Integer.to_string(@list.id) %>
 <div class="list_cards" id="<%= dom_id_list %>" data-list-id="<%= @list.id %>" phx-update="append">
            <%= for card <- @cards do %>
                    <%= live_component(@socket, MyAppWeb.CardComponent, id: "card_" <> card.id, user_id: @user_id, card: card, list_id: card.lista_id, type_tags: @type_tags) %>
            <% end %>
 </div>

inside my card component i have another ID id= "unit _ <% = @ card.id%>" around the content

<% dom_id_card = "unit_" <> Integer.to_string(@card.id) %>

<div phx-value-card_id= "<%= @card.id %>" class="card_<%= if @card.new == true, do: "contacts toast_format_new", else: "contacts"%>" id="<%= dom_id_card %>" data-card-id="<%= @card.id %>" data-list-id="<%= @list_id %>" data-user-id="<%= @user_id %> ">

    <%= live_component(@socket, MyAppWeb.DisplayedTagsComponent, id: "lists_tags"<>@card.tag_collection_id, card: @card, type_tags: @type_tags) %>

        <div phx-click="open_modal" class="open_info" phx-value-data_modal_id="<%= @card.contact_id %>" data-modal-id=" <%= @card.contact_id %>">
            <p phx-value-card_id="<%= @card.id %>" class="name_field"><%= if @card.title == nil, do: "Unknown", else: @card.title %>
            </p>

            <%= live_avatar(@card.img, @card.id) %>

        </div>
</div>

and my LiveHelpers module

  def live_avatar(url, card) do
    raw("""
    <div id="#{card}_field_avatar" phx-update="ignore">
      <img class="img_field" id="#{card}_tumbnail" src="#{url}"></img>
    </div>
    """)
  end

My move_card event is interacting with all this content

When you say renders again, I assume you are talking about the browser refetcihng the image? Or are you talking about the server?

In this context it would be the browser refetching, but I believe it is impossible to cancel this refetching repetition, because everything is ok by the server. I imagined that LiveView would have an action on that