hugoでアイキャッチ画像を表示させる。

前提・実現したいこと

hugoでブログサイトの制作をしています。一つ一つの記事にアイキャッチ画像を表示させたいのですが、表示されないので教えていただきたいです。

該当のソースコード

---
title: "Figmaのおすすめプラグイン18選"
date: 2020-01-28T18:52:05+07:00
images: [images/mac.png]
categories: [デザイン]
tags: [figma, デザイン]
authors: []
---

このように作成した記事には画像の指定をし、

static/images/mac.pngと画像もセッティングしました。

index.html
1    {{- range first 1 (where .Site.RegularPages "Type" "in" .Site.Params.mainSections) -}}
2        {{ $page := . }}
3        <div class="latest row py-lg-5">
4            <div class="col-lg-6 mb-3">
5                {{- with $page.Params.images -}}
6                    {{- $images := . -}}
7                    {{- with $page.Site.GetPage "section" "images" -}}
8                        {{- with .Resources.GetMatch (strings.TrimPrefix "/images/" (index $images 0)) -}}
9                            {{- $image := .Fill "700x450" -}}
10                            <a href="{{ $page.RelPermalink }}" class="d-block">
11                                <img data-src="{{ $image.RelPermalink }}" class="img-fluid rounded" alt="{{ $page.Title }}">
12                            </a>
13                        {{- end -}}
14                    {{- end -}}
15                {{- end -}}
16            </div>
17            <div class="col-lg-6 mb-3">
18                <h5 class="created text-muted text-uppercase font-weight-bold">{{ $page.Date.Format "January 2, 2006" }}</h5>
19                <h2><a href="{{ $page.RelPermalink }}">{{ $page.Title }}</a></h2>
20
21                <div class="content">
22                    {{ $page.Summary }}
23                </div>
24            </div>
25        </div>
26    {{- end -}}

index.htmlはこのような記述です。

どうかご確認いただきたいです。よろしくお願いいたします。

以降回答を受け変更した部分です。

---
title: "言語プロセッサについてまとめてみた"
date: 2020-01-30T19:09:53+07:00
images: [mac0.png]
categories: [コンピュータシステム]
tags: [コンピュータシステム, 基本情報技術者試験]
authors: []

このような記述にしたのですが、まだ解決しません。間違っている点を教えていただきたいです。

m.ts10806

2020/01/30 21:05

タグに「JavaScript」がありますが、どういう関連性でしょうか。画像表示されないだけなら「HTML」かと思うのですが。

m.ts10806

2020/01/30 21:11 編集

あと、提示されたURLのHTML見ましたが、homepage-image.jpg以外にimgタグがないですね。どこに何をどのように出すつもりだったのか具体的にイメージをご提示ください。

退会済みユーザー

2020/01/31 04:28

index.htmlのLatest articleの部分の<img data-src="{{ $image.RelPermalink }}" class="img-fluid rounded" alt="{{ $page.Title }}">のところで、プレビューでいうと日時、記事タイトル、サマリーの隣に出したいと考えています。

退会済みユーザー

2020/01/31 04:30

表示させたい画像はstatic/images/mac.pngです。