CODEWITHSUNDEEP
node.jsimagetemplateshandlebars.jssrc
SCOTT FARLEY
SCOTT FARLEY

Reputation: 33

Connection refused when using handlebars node template to set img src

I am new to using the templating functions in Node. I am using the handlebars templating engine to render dynamic views on a node server. I can render dynamic html, but am not able to set the src attribute for an image with a dynamic source. I get a connection refused error from the browser: 

GET uploads/CI_plot-II.png:1 GET http://localhost:8080/uploads/CI_plot-II.png net::ERR_CONNECTION_REFUSED

I am serving this image out of a static folder on the server, and when I GET it by navigating to it in the browser, I can see it, so I know it is there and live.

Relevant server code looks like this:

var hbs = require('hbs');
...
app.engine('html', hbs.__express);
...
app.use(express.static('public'));
...
app.get("/manageResources", function(req, res, next){
  //get data about a yet-to-be approve resource and send it over to the client via the view
  db = createConnection()
  sql = "SQL QUERY ..."
  db.any(sql)
    .then(function(data){
      //parse the response
      nestedData = parseObjectDBResponse(data)
      localvars = {username: req.session.username, sessionID: req.session.id, resourceData: nestedData[0]}
      console.log(localvars)
      res.render('manageResources', localvars)
    }).catch(function(err){
      res.render("error", {error: err})
    })
})

And the client template looks like this:

  <body>
    <div class='col-xs-12'>
      <h5>References</h5>
      {{#each resourceData.references}}
        <li style="list-style: none" class='hangingindent'>{{this.string}}</li>
      {{/each}}
    </div>
  <div id='image-holder' class='col-xs-6'>
    <img id='theImage' src={{resourceData.fileReference}}>
  </div>
  </body>
</html>

I've tried to do some workarounds like setting a data attribute on the image and then setting the src after the page loads with jQuery, but that doesn't work either.

I'm not really sure what's going on, or even whether the problem is on the client or server side.

Update:

If I refresh the page 3 or 4 times, sometimes the image shows up correctly.

Upvotes: 0

Views: 644

Answers (1)

SCOTT FARLEY
SCOTT FARLEY

Reputation: 33

I figured out that the problem was that I was using nodemon to automatically restart the server when a file changed. Because I was using a FileStore session store, files would change every time a user navigated to a page in the website, so the server would automatically restart and cause the connection refused error.

Using regular node fixes the problem.

Upvotes: 1

Related Questions