Image tag not is showing the images in the first load rails

Question

I'm trying to create a carrousel in rails with bootstrap and I'm using active storage to save the images.

My problem is when I load the page for the first time not is loading the images stored in the s3 bucket, but when I reload the page, the images appear.

I confirm that in the variable img is the image attached.

This is my code:

_carrousel.html.erb

<div id="carouselExampleControls<%=property.id%>" class="carousel slide" data-bs-interval="false">
  <div class="carousel-inner">
      <% count = 0%>
      <% property.property_image.images.each do  |img| %>
        <div class="carousel-item <%= 'active' if count == 0 %> background-covr">
          <%= image_tag(img, class: "card-img-top d-block background-covr") %>
          <% count += 1 %>
        </div>
      <% end %>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls<%=property.id%>" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls<%=property.id%>" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

Can someone give me a hand or an explanation?

Answer 1

I was able to fix this issue. The problem was turbolinks.

I removed turbolink of application.js and add this library:

gem 'jquery-turbolinks'

that's fixed the issue and continue working with the velocity of turbolink.