How to display image from dynamic path in node ejs - node.js

I am trying to display image based on the path I get from database
here's my code
<% cars.forEach(function(car) { %>
<div class="card">
<div class="img">
<img src="images/" +"<%=car.Img_path %>">
</div>
</div>
<% }); %>
I also tried <img src="images/<%=car.Img_path %>"> but not working.
Can Anyone suggest how to render image.
Thanks In Advance.

<img src="images/<%=car.Img_path %>"> works. My issue was i didn't included Img_path in car model.
whoever may get this type of issue make sure you have included that field in model otherwise you will have data in database for but you wont get it in your application

Related

ejs with progress bar

How to define or update style="width:<%=MettingPer %>;" for progress bar in ejs
<li class="list-group-item d-flex justify-content-between align-items-center">
Meeting
<div class="progress">
<div class="progress-bar progress-bar-striped bg-success progress-bar-animated" role="progressbar" style="width: 75%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
<%=MettingPer %>%</div>
</div>
</li>
EJS is rendered on the server, not the browser, so EJS has no idea what document is since that's something that's only defined in the browser.
So for this you need to load your page completely on the client side with zero value.
Then complete it according to the instructions in JavaScript.
And as soon as you receive a response from the server, complete and hide it with a little delay.

express-flash not showing message until refresh

I have express-flash installed and working, but only after I refresh the page I was redirected to. My controllers are using flash like so
req.flash("info", "No changes were made.");
res.redirect("/admin/dashboard");
In the view, I am importing a partial that looks like this.
<% if(messages.info) { %>
<div class="modal-content flashModal" id="message-info">
<div class="header">
<span id="closeBtn">×</span>
</div>
<div class="modal-body">
<strong>
<%= messages.info %>
</strong>
</div>
</div>
<% } %>
Not exactly sure what is causing the message to appear only after I have refreshed. It looks like the redirect is happening before the flash message? The documentation seemed straight forward enough but doesn't cover an issue like this. Any help is appreciated.
https://www.npmjs.com/package/express-flash
Try to use render instead of redirect. See if it works.
res.render('dashboard);

ejs express nodejs onclick show details

i built up a nodejs app using express and ejs as template engine. i can show a list of articles in a page but i don't know how to show detail of article when i click on the item. using Angular 4 you can use components and inject componets on the same page showing details in one compement when you click the item in the other one. i was wondering if it is possible to achieve same goal with ejs
<div class="container">
<div class="row">
<div class="col-lg-4">
<% items.forEach(item){%>
<ul>
<li><%=item%></li>
</ul>
<% } %>
</div>
<div class="col-lg-8>[here details of article]</div>
</div>
</div>

show element on specific user with nodejs

I'm building a social app and under each image I have a comment section. I want to render every comment and to include a delete button only to the user that made the comment. Can anyone help me handle this?
here is how I render the comments:
{{# each image.comments}}
<div class="comments clearfix">
<img src="{{this.avatar}}" class="logo">
<span><strong>{{this.userName}}</strong><br> {{this.comment}}</span>
</div>
{{/each}}
`
You can track the comments for the images in the database. When a user comments for an image store that comment as well as check if the user Id is same as the owner id of the image. If so, then the user who just comments must be the owner and set a property like "isOwner = true" for the comment, along with the comment text.
And in the front end you can check this property and set a delete icon..
{{#each image.comments}}
<div class="comments clearfix">
<img src="{{this.avatar}}" class="logo">
<span><strong>{{this.userName}}</strong><br> {{this.comment}}</span>
{{#if this.isOwner}}
<i class="fa fa-trash"></i>
{{/if}}
</div>
{{/each}}

image will display in dreamweaver but shows a blank in web browser

The image index_03.jpg will display in Dreamweaver but does not show in the browser. All of the files are in the appropriate place I have checked, could it be something with my code?
<body>
<div id="wrapper">
<div id="wrapper2">
<div id="header">
<div id="logo">
<h1><img src="images/index_03.jpg" alt="" width="508" height="130" /></a></h1>
</div>
</div>
Did you upload that directory and image to your server? If it's not there, it will be broken because the web server can't find it. Where do you have this page? Do you have a link you can share w/us?

Resources