how express forming the img URL

by

This is just how browser’s handle relative paths.

You have a Handlebars template that contains the following:
<img src="{{file}}" class="responsive-img">

The value of file is set to uploads/${req.file.filename}, which becomes something like uploads/myImage-1589223958713.PNG.

When your template is executed with above value for file you get:
<img src="uploads/myImage-1589223958713.PNG" class="responsive-img">

When the browser sees a relative URL, like uploads/myImage-1589223958713.PNG, it has to figure out the absolute URL. Since this relative URL does not begin with a /, the browser thinks it is a child path of the current page URL.

If the current page URL is http://localhost:3000/uploaded/uploader, the browser thinks your uploads/myImage-1589223958713.PNG URL is a child of http://localhost:3000/uploader/ and so produces: http://localhost:3000/uploader/uploads/myImage-1589223958713.PNG.

To get the correct URL, you want to set the value for file so that it includes the full path:

file: `/uploads/${req.file.filename}`

Update:
Note that /public should not be included in the value for file because the /public directory is registered with express as a directory in which to look for static assets.

More Related Contents:

  1. Handlebars: Access has been denied to resolve the property “from” because it is not an “own property” of its parent
  2. Using Express Handlebars and Angular JS
  3. Writing to files in Node.js
  4. How to access POST form fields in Express
  5. How to access the request body when POSTing using Node.js and Express?
  6. How to enable cors nodejs with express?
  7. Render basic HTML view?
  8. How to get a URL parameter in Express?
  9. Failed to load c++ bson extension
  10. Function to convert timestamp to human date in javascript [duplicate]
  11. How do I remove documents using Node.js Mongoose?
  12. Nodejs express and promises not doing what I expect
  13. How can I set response header on express.js assets
  14. UnhandledPromiseRejectionWarning: MongooseServerSelectionError
  15. What does “./bin/www” do in Express 4.x?
  16. Express js form data
  17. Why is PassportJS in Node not removing session on logout
  18. MongoDB select where in array of _id?
  19. res.download() not working in my case
  20. Accessing EJS variable in Javascript logic
  21. Listen on HTTP and HTTPS for a single express app
  22. Accessing Express.js local variables in client side JavaScript
  23. Node.js request CERT_HAS_EXPIRED
  24. Node.js / Express.js – How to override/intercept res.render function?
  25. configure node express to serve static bower_components?
  26. require(‘babel/register’) doesn’t work
  27. Express: Setting content-type based on path/file?
  28. NodeJS: How to get the server’s port?
  29. how to use jQuery installed with npm in Express app?
  30. How can I easily get access to form data in Express js?

Leave a Comment