CODEWITHSUNDEEP
javascriptnode.jspug
S. O. Chaos
S. O. Chaos

Reputation: 146

Images Not rendering with Jade

I have a simple web app containing main js file and Jade file representing main page. JS file looks like this:

var express = require('express');
var path = require('path');

var app = new express();

app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

app.get('/', function (req, res) {
    res.render('character', {
        exp : 0,
        requiredExp : 0,
        coins : 0,
        frames : [
            'bronze_frame',
            'silver_frame',
            'golden_frame',
            'jade_frame',
            'conduit_frame',
            'tempest_frame'
        ],
        badges : [
            'night_edge_badge',
            'arcanum_badge'
        ]
    });
});

app.listen(25555);

And the Jade file like this:

doctype html
html
    head
        title= title
        //link(href="./css/character.css", rel="stylesheet", type="text/css")
    body
        div
            img(src="./assets/wizard.png")
            progress(value=exp, max=requiredExp)
        div
            img(src="./assets/coin.png")
            p= coins
        div.showcase
            for frame in frames
                img(src='/assets/#{frame}.png')
        div.showcase
            for badge in badges
                image(src='/assets/#{badge}.png')

And when I run JS file and try to connect to it, I get this:

enter image description here

The jade file is in "view" folder, "assets" folder is also in "view" folder. So why images isn't drawn? I need an explanation and, if possible, solution of the issue.

Upvotes: 0

Views: 659

Answers (1)

cl3m
cl3m

Reputation: 2801

You should tell Express to use the static middleware to serve your static content (css, js, jpg...):

var express = require('express');
var path = require('path');

var app = new express();
app.use(express.static(path.join(__dirname, 'views')));

More info in the express documentation.

Also, make sure that your assets paths are consistent: is it ./assets or /assets ?

img(src="./assets/coin.png")
div.showcase
    for frame in frames
        img(src='/assets/#{frame}.png')

Upvotes: 1

Related Questions