-3

I am writing an express app that uses a template engine called Handlebars. The html files it serves contain images that point to certain places in my root directory. This works fine for surface-level routes such as "http://localhost:5000/image" or "http://localhost:5000/login". However, when I go to a deeper route such as "http://localhost:5000/image/1", all of the images point to a nonexistent "/image" folder in my root directory. Screenshots demonstrating this here: The first image uses a surface-level route, /image

The second image uses a deeper route, /image/1

How can I force my pages to only point to my root directory regardless of which route the user is in? I cannot simply change the src in the html files as I am using a template engine that serves the same banner image regardless of what page the user is on.

Here is my codeenter image description here

Melissa
  • 77
  • 5
  • 2
    Note: you should not post images of code, instead edit the question and embed the code there. See https://stackoverflow.com/help/how-to-ask for more information :) – eol Nov 03 '20 at 09:18

3 Answers3

0

Looks like you are using relative paths in your template. Since you use express.static to serve files in the root directory, try changing the image paths to absolute paths (starting with an /):

<img src="/assets/path/to/your-image.png">
eol
  • 23,236
  • 5
  • 46
  • 64
  • The example you give is how I am currently doing it. Are you saying that I have to use If so, I can live with that. Thank you for your help – Melissa Nov 03 '20 at 09:22
  • @Melissa — "The example you give is how I am currently doing it." No, it isn't. You've posted a screenshot. We can see that isn't how you are doing it. – Quentin Nov 03 '20 at 09:27
0

You're approaching this from the direction.

Currently you are using relative paths in your HTML. <img src="assets/etc…

These are resolved by taking the base URL (usually the path to the current HTML document), removing the fragment id, query string, and everything after the last / and then appending the relative path.

So the resolved path will change based on the URL of the HTML document you are viewing.

You could do what you are asking for and write code so that:

/assets/foo
/something/assets/foo
/something-else/assets/foo
/something/something/assets/foo

All give you the same resource.

However:

  • This would break caching of that resource
  • It would be a pain to write
  • You might get duplicate content penalties in search engines

So don't do that.

Instead, pick a URL for the resource and change the HTML so you are always asking for the same URL.

Use an absolute path which starts with a /.

These are resolved in a similar way to relative URLs, but instead of stripping off everything after the last / they strip off everything after the hostname (and optional port number).

<img src="/assets/etc…
Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
0

Dedicate a separate directory for static files. Then always refer to them as an absolute path.

Jora
  • 191
  • 2
  • 13