所要時間の目安 : 5分
サイトに画像を載せてみましょう。
# 画像をアップロードする
ファイルツリーの public フォルダに任意の画像をドラッグアンドドロップすることで、画像をアップロードします。
# 画像を表示するためのページを作る
前回と同じように新しいページ illust.astro を作ります。
---
---
<html lang="ja">
<head>
<meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} />
<title>画像置き場</title>
<style>
</style>
</head>
<body>
<h1>画像置き場</h1>
<img src="yourself.png" alt="do it yourself !!">
<br>
<a href="/">Home</a>
</body>
</html>
<img> タグの src にはアップロードした画像のファイル名を、alt には画像の説明を入力します。
index.astro にページ内リンクを配置します。
---
---
<html lang="ja">
<head>
<meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} />
<title>n1sym Page</title>
<style>
</style>
</head>
<body>
<h1>n1sym</h1>
<p>ここは n1sym の個人サイトです。</p>
<a href="/about">about</a> / <a href="/illust">illust</a>
</body>
</html>
画像が表示されていることを確認してみましょう。
# 公開しているページに変更を反映させる
画像が表示出来たら、Commit ボタンをクリックして公開ページにも反映させてみましょう。