🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

Markdown

Markdownは、文書の構造、修飾情報を記述するための軽量マークアップ言語です。

Q&A

解決済

1回答

800閲覧

HUGOでマークダウンファイルのFront Matterに画像のパスを記述し、そのパスを別ファイルから呼び出しているが画像が表示されない。

minyouyuu

総合スコア39

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

Markdown

Markdownは、文書の構造、修飾情報を記述するための軽量マークアップ言語です。

0グッド

0クリップ

投稿2019/10/14 09:14

HUGOでマークダウンファイルのFront Matterに画像のパスを記述しました。そして、そのパスをリストから呼び出しているのですが、リストに画像が表示されません。

Markdown

1delete_repository.md 2--- 3title: "GitHubでリポジトリを削除する方法" 4date: 2019-10-14T22:03:26+09:00 5hiduke: "2019/10/14" 6description: "GitHubでリポジトリを削除する方法" 7src: "https://nekoganekoronda.github.io/hachiguma-shoten/images/IT/001_delete_repository/0001_リポジトリ削除.png" 8--- 9 10<h1 class="md-title"> 11 GitHubでリポジトリを削除する方法 12</h1> 13

html

1it.html 2<!DOCTYPE html> 3<html lang="ja"> 4<head> 5 <meta charset="UTF-8"> 6 <title>{{ .Site.Title }}|IT記事</title> 7 <meta name="description" content="現役システムエンジニアによるIT記事"> 8 {{ partial "header.html" . }} 9</head> 10<body> 11<div id="container"> 12 <!-- global navigation --> 13 {{ partial "breadcrumbs.html" . }} 14 <!-- hero image--> 15 {{ partial "hero_image.html" . }} 16 <!-- breadcrumbs navigation --> 17 {{ partial "breadcrumbs.html" . }} 18 <!-- content --> 19 <div class="l-content-fixed" id="content"> 20 <!-- main --> 21 <h1 class="md-title"> 22 IT記事 23 </h1> 24 <ul class="link-list"> 25 {{ range (.Paginator 10).Pages }} 26 {{ .Render "list_it" }} 27 {{ end }} 28 </ul> 29 <!-- ページめくりリンクの追加 --> 30 {{ if or (.Paginator.HasPrev) (.Paginator.HasNext) }} 31 <div> 32 <nav role="pagination"> 33 {{ if .Paginator.HasPrev }} 34 <a href="{{ .Paginator.Prev.URL }}">前へ</a> 35 {{ end }} 36 <span class="">Page {{ .Paginator.PageNumber }} of {{ .Paginator.TotalPages }}</span> 37 {{ if .Paginator.HasNext }} 38 <a href="{{ .Paginator.Next.URL }}">次へ</a> 39 {{ end }} 40 </nav> 41 </div> 42 {{ end }} 43 </div> 44 <!-- footer --> 45 {{ partial "footer.html" . }} 46</div> 47</body> 48</html>

html

1list_it.html 2<div class="it-title"> 3 <a href="{{ .Permalink }}" class="top-links clearfix"> 4 <img class="link-title-img link-img" src="{{ .Src }}" alt="各IT記事のヘッダー画像"> 5 <time class="article-list-title-time">{{ .Date.Format "2006/01/02" }} 更新!</time> 6 <h1 class="article-list-title"> 7 {{ .Title }} 8 </h1> 9 </a> 10</div>

HUGOのリスト機能を使っています。
it.htmlから、list_it.htmlが呼ばれて、list_it.htmlのsrc="{{ .Src }}"から、delete_repository.mdの「src: "https://nekoganekoronda.github.io/hachiguma-shoten/images/IT/001_delete_repository/0001_リポジトリ削除.png"」が呼ばれて、リストに画像が表示されると思うのですが、表示されません。白い画面に「404 page not found」とだけ表示されます。

it_list.htmlから「 <img class="link-title-img link-img" src="{{ .Src }}" alt="各IT記事のヘッダー画像">」の部分を削除すれば、リストは表示されるので、画像の表示させる方法が間違っているのだと思います。

どのようにすれば、マークダウンに記述した画像のパスを用いて、リストに画像を表示することができますか?

よろしくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

list_it.html内のsrc="{{ .Src }}"をsrc="{{ .Params.src }}"に修正することで画像を表示できました。皆さま、お騒がせいたしました。

投稿2019/10/14 11:00

minyouyuu

総合スコア39

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問