Question

在任何地方都找不到答案。我在pug中有一个简单的列表，我以为我应该使用下面的语法。图像占位符会在呈现的网站中显示并显示样式（大小），但是在我的Visual Studio控制台中，图像上有一个404。我认为该图像必须与index.pug文件位于同一文件夹中。有什么想法为什么它不会显示？

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/')

Answer 1

图像是静态内容。因此，我们必须指定静态资产的目录。因此，创建一个名为public（或您喜欢的名称）的文件夹，然后将图像文件放入其中。

然后进入index.js（或您的入口点）：

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

现在图像的路径变为：

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

文档Serving static files in Express

中的更多内容

如何在Pug中将图像添加到列表中

1 个答案: