CODEWITHSUNDEEP
node.jsimagehtml-tablepug
brent
brent

Reputation: 924

Insert Image using Jade and NodeJS

How can I use an object that I've passed through to jade within an image, I'm also using mongodb to hold the data.

Currently this is my code:

db.collection('blogposts', function(err, collection) {
    if (err) throw err;
    collection.find().toArray(function(err, docs) {
        if (err) throw err;
        res.render('table', { title: 'Blog Posts', tab: "list" , blogposts: docs });
    });
});

So I have the nodejs passing through a mongodb collection through to jade, Then within Jade I have:

div.span9
    table.table.table-bordered.table-striped.noborder

        each row in blogposts
            tr
                td
                    div.blogtitle #{row.Title}
                    br
                    div.blogheading #{row.Heading}
                    br
                    div.namedate #{row.Namedate}
                    br
                    div.imagetable
                        img(src='')
                    br
                    div.blogposts #{row.Posts}
                    br
                    div.blogtags Tags: #{row.Tags}

And what I'm trying to do is use #{row.Image} within the actual img(src='') as the source.

It appears that I must use some other syntax or something to use it within the source as just putting it in doesn't work.

Upvotes: 7

Views: 42247

Answers (3)

Greg S
Greg S

Reputation: 109

While if you are sending a link it might work the way has been detailed. If you are sending over the data as a base64 encoded string, then you must prepend the following to your picture data:

"data:image/png;base64,"

So you would have: img(src= "data:image/png;base64," + row.ImageDataBase64)

Upvotes: 0

kjonsson
kjonsson

Reputation: 2799

I had a similar issue. My url already had https:// prepended. The solution that worked was:

img(src=row.Image)

Upvotes: 0

Peter Lyons
Peter Lyons

Reputation: 145994

Just do img(src= "http://" + row.Image)

Jade will treat the src attribute value as a javascript expression, evaluate it and render the HTML as you would expect.

Upvotes: 11

Related Questions