CODEWITHSUNDEEP
node.jspug
Azurespot
Azurespot

Reputation: 3152

How do I add an image to a list in Pug

Can't find an answer to this anywhere. I have a simple list in pug, and I thought I was supposed to use the syntax I have below. The image placeholder shows up and the styling (size) in the rendered website, but there is a 404 on the image in my Visual Studio console. I thought the image needed to be in the same folder as the index.pug file, which it is. Any ideas why it won't show up?

extends layout

block content
  doctype html
  html(lang="en")
    head
      meta(charset='utf-8')
      meta(name='viewport' content='width=device-width, initial-scale=1')
    section
      nav
        ul
          li.title Study Bot
          li.robot 
            img(src='robot-face.jpg' alt='Robot face' width='130px')
      article
    footer
      iframe#encyclopedia-window(src='https://en.wikipedia.org/wiki/')

Upvotes: 0

Views: 5341

Answers (1)

SanSolo
SanSolo

Reputation: 2375

Images are static content. So we have to specify the directory for static assets. So create a folder named public (or anything you like), place the image file in it.

Then in index.js(or your entry point):

app.use(express.static('public'))

Now path to image becomes:

src='/static/robot-face.jpg'

More in the documentation Serving static files in Express

Upvotes: 2

Related Questions