如何在hugo中使用来自json的路径渲染图像答案

【问题标题】：How to render image using path from json in hugo如何在hugo中使用来自json的路径渲染图像
【发布时间】：2021-11-04 00:51:04
【问题描述】：

项目结构如下所示。

/
|__ assets
|   |__ imgs
|       |__ pic-nodejs.jpg
|       |__ pic-denojs.jpg
|
|__ data
|   |__ products.json
|
|__ layouts
    |__ _default
    |   |__ baseof.html
    |
    |__ partials
    |   |__ card.html
    |
    |__ index.html

项目目标基本上是在网格布局中显示具有 Bootstrap-ish 卡片样式的产品列表。以下是上述文件中的 sn-ps。

/data/products.json

[
  {
    "Uid": "110",
    "Name": "Nodejs",
    "Imgsrc": "imgs/pic-nodejs.jpg"
  },
  {
    "Uid": "120",
    "Name": "Denojs",
    "Imgsrc": "imgs/pic-denojs.jpg"
  }
]

index.html

{{ define "main" }}
  <section>
    {{ partial "card.html" . }}
  </section>
{{ end }}

partials/card.html

{{ $data := getJSON "/data/products.json" }}
{{ range $data }}
  <header>
    <h2>{{ .Name }}</h2>
  </header>
  <img src={{ .Imgsrc }} alt={{ .Name }} />
{{ end }}

card.html 的预期输出。

<section>
  <header>
    <h2>Nodejs</h2>
  </header>
  <img src="imgs/pic-nodejs.jpg" alt="Nodejs" />
</section>

我有这个。

<section>
  <header>
    <h2>Nodejs</h2>
  </header>
  <img src="" alt="Nodejs" />
</section>

没有加载图片。 知道怎么做吗？

我目前正在使用 HUGO v0.88.1 Extended。

【问题讨论】：

这就是怎么做...我在您的代码中没有看到错误。 Imgsrc 字符串真的是空的吗？

标签： hugo

【解决方案1】：

将文件夹 imgs 移动到 static 文件夹中

检查我的仓库的this branch

【讨论】：