0

An image.ico in a navbar brand in my EJS template doesn't work. I read 404 (Not Found) on browser console. I'm sure that relative path is correct. I also checked image permission and they are ok and I tried to to change image position, ( moving in other directory) but it continue not showing.

Inserting logo in a navbar seems a very easy operation. What have I forgotten?

Following code is my navbar.

Thanks


<nav class="navbar navbar-expand-md">

  <a class="navbar-brand" >
    <img src="../../static/images/icona.ico" alt="ico" style="width:40px;">
  </a>

  <a class="navbar-brand" > Title </a>
</nav>

EDIT and SOLUTION

Based on the suggestions about the wrong image path, I move the image to a static (public) folder, change the path in the src attribute and it works. I believe the main problem was a directory tree which fooled me. In my case


├── index.js
├── static
│   ├── css
│   └── js
|   └── images
|         |__icona.ico
|   |___libs
├── _views
│   ├── main_page_1.ejs
|   |___main_page_2.ejs
|   |__....
│   └── components
|       └── navbar.ejs

To solve the problem I use "/images/icona.ico" instead "../../static/images/icona.ico. The correct path allows you to get images from the index.js script. Note that using the correct path is impossible navigate from vscode to images. Images cannot be opened using CTRL + click with file path navbar.ejs.

init
  • 55
  • 8
  • 2
    If you get 404 error the problem is in the path – Sfili_81 Oct 06 '21 at 15:01
  • In VS code, using CTRL + click on path Im able to open icon. Are there other test that I can perform to check the path? – init Oct 06 '21 at 15:14
  • 1
    Try to open image in new tab and copy full url and add to img src and if still not work it is a problem (we can try to find solution) otherwise it only can solve at your side. – Sparrow Oct 06 '21 at 15:23
  • https://stackoverflow.com/questions/13094257/display-an-ico-within-an-image-element-img – T S Oct 07 '21 at 18:13

0 Answers0