Iam currently working on MERN stack project and in that I want to display images in the form of cards, Iam using bootstrap for styling. All my cards go well but after some time my first card image is not displaying, and the remaining are working well. when I checked the code using inspect, the src attribute for img tag is empty only for card. But the link I have given in my database is working well and I did not miss anything. Only first card image is not displaying, all other images are working. If I removed that card from database, after some time the next first card also not displaying. Iam not able understand the problem. Please help me.

Here is my code for main page using ejs :

<div class="row row-cols-lg-3 row-cols-md-2 row-cols-sm-1">
    <% for(let listing of allListings) { %>
    <a href="/listings/<%= listing._id %>" class="listing-link"
     ><div class="card">
      <img
        src="<%= listing.image.url %>"
        class="card-img-top"
        alt="listingimage"
        style="height: 20rem"
      />
      <div class="card-img-overlay"></div>
      <div class="card-body">
         <p class="card-text">
         <b><%= listing.title %></b> <br />
         ₹ <%= listing.price %>
       </p>
      </div>
     </div>
   </a>
  <% } %>

the url provided in my database is correct. Only first card image is not displaying, all other images are working.