image is not showing in cards pls solve this problem

[Vaibhavkumar5158]

I tried very hard but image is not showing in cards
@apna-college please solve this problem as soon as possible

<% layout("/layouts/boilerplate") %>

All Listings

<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 col">
                <img src="<%= listing.image %>" class="card-img-top" alt="listing_image" style="height: 20rem;">
                <div class="card-body">
                    <p class="card-text">
                        <b><%= listing.title %></b><br>
                        &#8377; <%= listing.price.toLocaleString("en-IN") %> / night
                    </p>
                </div>
            </div>
        </a>
    <% } %>  
</div>

please solve this problem @apna-college

[tanzeelpasha]

Bro I too encountered the same issue.... finally found the bug and resolved!
while copying the link from the browser, dont copy the WEBPAGE link right click on the image and copy the image address!!
That's it! Thank me later! (-:

[Vaibhavkumar5158]

I tried copy the image address but this thing not work for my code please give me proper explanation and code

[tanzeelpasha]

okay bro.. if your code is the one u have posted above then change this part
<%= listing.image %>" -----------> <%= listing.image.url %>"

hope this may resolve that

[karanayron]

app.get("/listings", async (req, res) => {
    const allListings = await Listing.find({}).lean();
    allListings.forEach(listing => {
        if (listing.image) {
            listing.image = listing.image.url;
        } else {
            listing.image = null;
        }
    });
    res.render("./listings/index.ejs", { allListings });
});

Replace your "/listings" route with this
Link of the image is stored in image.url and not image

[om00-G]

Bro I too encountered the same issue.... finally found the bug and resolved! while copying the link from the browser, dont copy the WEBPAGE link right click on the image and copy the image address!! That's it! Thank me later! (-:

can u send me your whole project till now .code zip file or github repository link here

[karanayron]

Bro I too encountered the same issue.... finally found the bug and resolved! while copying the link from the browser, dont copy the WEBPAGE link right click on the image and copy the image address!! That's it! Thank me later! (-:

can u send me your whole project till now .code zip file or github repository link here

Thanks for reaching out. You can fork the repository from the link I shared:
https://github.com/karanayron/WanderLust

Forking allows you to create your own copy of the project in your GitHub account. From there, you can make changes and improvements as needed. Let me know if you face any issues! 🚀

[Umar-Muntazeer]

same problam broo

[Umar-Muntazeer]

image not showing

[tanzeelpasha]

Check for the link you are pasting .... It should be the image link not the webpage link ... And also check the command for accessing the link ....<listing.image.url>

[Umar-Muntazeer]

phase 1 part b mai hai bug

[Umar-Muntazeer]

<% layout("/layouts/boilerolate.ejs") %>

All Listings

<!-- <form method="GET" action="/listings/new">
    <button>Create New Listing</button>
</form> -->


<%for(let listing of allListings ){%>
<div class="card" style="width: 18rem;">
    <img src="<%= listing.image %>" class="card-img-top" alt="">
    <div class="card-body">
      <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    </div>
  </div>
  <%}%>

<ul>
    <%for(let listing of allListings ){%>
          <li> <a href="/listings/<%= listing._id %>" ><%= listing.title %></a></li>
    <%}%>
    </ul>

[om00-G]

Bro is that gifs results of 100 + 50 are declared and where we can see it???

…

On Sat, 4 Jan, 2025, 10:01 pm Umar-Muntazeer, ***@***.***> wrote: <% layout("/layouts/boilerolate.ejs") %> All Listings <!-- <form method="GET" action="/listings/new"> <button>Create New Listing</button> </form> --> <%for(let listing of allListings ){%> <div class="card" style="width: 18rem;"> <img src="<%= listing.image %>" class="card-img-top" alt=""> <div class="card-body"> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> </div> <%}%> <ul> <%for(let listing of allListings ){%> <li> <a href="/listings/<%= listing._id %>" ><%= listing.title %></a></li> <%}%> </ul> — Reply to this email directly, view it on GitHub <#22 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/BL4VVLAI7FRM4TZOPF7EKVT2JAEGPAVCNFSM6AAAAABSHUMOVOVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDKNZRGM2DSMJYGU> . You are receiving this because you commented.Message ID: ***@***.***>

[tanzeelpasha]

Umar dm me on discord wil help u there...
Username - tanzeel21