node.jsexpressexpress-handlebars

Unable to display the uploaded image in express node project? Please support


want to display the image which was uploaded in server,but unfortunately not getting. Image is uploaded successfully in server and changed the name in express project folder,but while fetching not getting the image. Additional route path is coming in front of image while fetching.Image is stored in server in this path "public/images/1670147053485apic.jpg"

please find my route file users.js below:

router.get('/display', (req, res) => {
  sql = `SELECT * FROM product`
  db.query(sql, (err, result) => {
    if (err) throw err
    res.render('insertDisplay', { data: result })
  })
})

also insertDisplay.hbs details below:

<table>
    <thead>
        <tr>
            <th>Product</th>
            <th>Category</th>
            <th>Time</th>
            <th>Image</th>
        </tr>
    </thead>
    <tbody>
        {{#each data}}
        <tr>
            <td>{{this.Product}}</td>
            <td>{{this.Category}}</td>
            <td>{{this.date}}</td>
            <td><img src="{{this.Image}}"></td>
        </tr>
        {{/each}}
    </tbody>
</table>

In running log am getting GET /users/1670147053485apic.jpg 404 103.009 ms - 1407

but not displaying any image

screenshot currently getting the output:


Solution

  • Issue Resolved:- (Express-Generator,Handlebars,MySql these are my working environment)

    1. An image file is uploaded into express application(or server) and its name is stored in database.(No Issue-uploaded successfully)
    2. But not able to display the image using handlebars,while try to display from db(this was the real issue faced).
    3. Changes made in 'insertDisplay.hbs' file, now its working( changes made)

    My express app structure, images stored in 'public/images' location.

    Thanks for support -Konrad,Tiddo