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(
          "data" => %{
            "card_id" => id,
            "to_list" => lis_id,
            "to_position" => pos
        } = params,
      ) do

    card =

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

       cards: current_lists(socket),

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

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

<% dom_id_card = "unit_" <> Integer.to_string( %>

<div phx-value-card_id= "<%= %>" class="card_<%= if == true, do: "contacts toast_format_new", else: "contacts"%>" id="<%= dom_id_card %>" data-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="<%= %>" class="name_field"><%= if @card.title == nil, do: "Unknown", else: @card.title %>

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


and my LiveHelpers module

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

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