0

Image is not being loaded though {{post.story}} is being displayed correctly. Console displays a 404 error.

My homepage.hbs contains the following code:

{{#each data as |post|}}
     //dispayed correctly
     {{post.story}}
     //not being displayed
     <img src= {{post.image}}>
{{/each}}    

2 Answers 2

1

You need to wrap your img src in a string.

<img src="{{post.image}}">
7
  • @HarshitBisht Can you kindly copy and post the <img> element from your page source? Commented Aug 1, 2017 at 0:10
  • <img src= "/home/harshitbisht96/WebstormProjects/gridfsandmulter/uploads/avatar-1501541056425.png" > Commented Aug 1, 2017 at 0:12
  • So I'm guessing that you see an error in your JS console along the lines of "Resource cannot be retrieved." Can you post file structure of your project? Commented Aug 1, 2017 at 0:14
  • Error in the console is -- Failed to load resource: the server responded with a status of 404 (Not Found).The 'data' is being coming from the javascript file imagesDb.find({}).toArray().then(function (data) { res.render('homepage', {data: data}); }) The homepage is the template which I am rendering. Commented Aug 1, 2017 at 0:20
  • Try changing your img src to "uploa‌​ds/avatar-1501541056‌​425.png" Commented Aug 1, 2017 at 0:22
0

As an alternative, you can specify the static folder for the express middleware to look for static stuff like images, css files etc.

paste the below code where you have defined your express middleware (typically app.js or server.js)

// create an instance of express module
const express = require('express');

const app = express();
app.use(express.static('<path of the directory>'));

here the name of the directory should be directory where such static files are located.

Hope it helps!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.