Question

图像：- root_folder\views\img\home_bg.jpg

pug 文件：- root_folder\views\index.pug

css 文件：- root_folder\views\assets\css\style.css

我正在尝试使用 NodeJS 创建简单的站点，我不了解 pug 编码，但我使用 html 到 pug 转换器来创建 pug 文件。

这是我的带有 img 标签和路径的“内容”容器的 html 代码

      <div class="content">
        <img src="/views/img/home_bg.jpg" alt="">
      </div>

这是我的哈巴狗代码：-

      .content
         img(src='../../Project 1/views/img/home_bg.jpg' alt='')

这是我使用 pug 的输出：-

pug results

这是我使用 html 的输出：-

result which i get using html

pug 模板中的有效路径是什么？请指教？

Answer 1

您是否尝试删除一个 ../，或将与 html 中相同的 src 链接放入，我看到图像未加载，因此这只是假设 src 链接可能是不工作。

/views/img/home_bg.jpg

 .content
         img(src='../Project 1/views/img/home_bg.jpg' alt='')

也许这会有所帮助。

Answer 2

image :- root_folder\views\img\home_bg.jpg

pug file:- root_folder\views\index.pug

css file:- root_folder\views\assets\css\style.css

file directory

I am trying to create simple site using NodeJS, I've no knowledge of pug coding but I used html to pug converter to create a pug file.

Here is my html code for 'content' container with img tag and path

      <div class="content">
        <img src="/views/img/home_bg.jpg" alt="">
      </div>

你给出的路径，总是相对于包含路径的文件。

路径：<img src="/views/img/home_bg.jpg" alt=""> 将指向不存在的文件夹：root_folder/views/views/img/home_bg.jpg。正确的标签应该是：

<div class="content">
  <img src="img/home_bg.jpg" alt="">
</div>

同样适用于此代码行： .content img(src='../../Project 1/views/img/home_bg.jpg' alt='') 它将移动下面的 2 个文件夹并导致：root_folder/Project 1/views/img/home_bg.jpg 根据您的文件目录也不存在。

图像未与 img src 一起显示

2 个答案: