The image element does not display. It shows the default image file with alternative name.
Here is my code. I had render it having object avatar having value null.so if its its null its should show the ../allUploadedPhoto/Avatar/no-profile-pic.jpg image.
<div class="edit-container">
<div id="avatar">
<% if(Avatar){ %>
<img src="<%=Avatar%>" width="100" height="100">
<% } else { %>
<img src="../allUploadedPhoto/Avatar/no-profile-pic.jpg" alt="no-profile-pic" width="500" height="500">
<% } %>
</div>
Here is my folder structure
project
|
|_ allUploadedPhoto
| |_ Avatar
| |_ no-profile-pic.jpg
|
|_view
|_profile.ejs
It looks like you are using a path for the image relative to the EJS file. You need to use a path to the file that is available from the url that the resulting page is served from.
This will vary depending on how you are serving your application.
When you run your application, say on localhost:3000 or example.com, the path the file would be something like /allUploadedPhoto/Avatar/no-profile-pic.jpg, but will depend on how you are serving your files.
Express
Since you are using EJS, I am going to make a big jump to say that you may be using Express, in which case, you should serve the static files by adding the following line in your express initialisation:
app.use(express.static('public'))
You would then place your image in a folder at the root of your project named public, and the path to your image would then be /no-profile-pic.jpg or if you put the entire folder structure into the public folder it would be /allUploadedPhoto/Avatar/no-profile-pic.jpg.
If you are using another method to serve you application, do update your question with the specifics.