Currently developing a social media platform similar to Facebook and in the process of implementing profile picture uploads. Within my User schema, there is a specific field called profilePicture. The concept involves users visiting their profile page, uploading an image, and having the URL of that image stored in their profilePicture attribute.
User Schema:
const userSchema = new mongoose.Schema({
username: String,
profilePicture: String,
});
Presented below is an example of how a User's data appears within the database.
_id: 642716b83w306234dx8d6cab
username: "Dagger"
profilePicture: "public\images\uploads\a7c770ff72d830a4fb0c8f6963ab9aa8"
In relation to retrieving the profile picture through a GET request, I am utilizing User.find() to search for the profilePicture.
router.get("/:user/profile-picture", (req, res) => {
User.find({}, "profilePicture").exec(function (err, profilePicture) {
if (err) {
return next(err);
}
res.render("picture", { user, id, picture, profilePicture });
});
});
However, upon trying to display the image on the EJS page using the img tag, nothing appears.
<div class="avatar">
<img src="<%= profilePicture %>.jpg" alt="logo" />
</div>
Upon inspection, it becomes evident that the value of <%= profilePicture %> lists out all Users in the database. How can this be refined to only display the value matching
"public\images\uploads\a7c770ff72d830a4fb0c8f6963ab9aa8"