图片不显示 img src

Question

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

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

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

file directory

我正在尝试使用 NodeJS 创建简单的网站，我不知道 pug 编码，但我使用 html to 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 根据您的文件目录也不存在。