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! 🚀