Zenn
📝

GitHub Pagesで画像が正しく表示されない

に公開
GitHub Pages
Nuxt 3
tech

備忘録です。

前提

  • Nuxt 3.13.2
  • Vue3 3.4.27
  • Github Actions で Github Pages へデプロイしている
  • 当時のdir構成は以下（抜粋）
┬─public
│　└─省略
├─server
│　└─省略
├─src
│　├─assets
│　│　├─css
│　│　└─image
│　│  　└─picture.jpg　//表示したい画像
│　├─components
│　│　├─Footer.vue
│　│　├─Header.vue // 画像を読み込みたいファイル
│　│　└─Menu.vue
│　└─pages
│　│　└─index.vue
└─nuxt.config.ts

やりたいこと

~/src/components/Header.vueに画像を表示したい。
画像のパス・ファイル名は動的である必要はなし。

事象

build後の画像ファイルのパスにGitHub Pagesサブディレクトリパスが含まれず(※1)、画像が正しく読み込みされない。

// build後
/_nuxt/picture.[hash].jpg

// 期待値
/＜リポジトリ名＞/_nuxt/picture.[hash].jpg

解消方法

nuxt.config.tsでbaseURLにGitHub Pagesのサブディレクトリパスを明示的に指定する。

export default defineNuxtConfig({
  app: {
    baseURL: "/＜リポジトリ名＞/",
    buildAssetsDir: "/_nuxt/",
    // 省略
  },
  // 省略
)}

ちなみにvueファイル側はassetsのエイリアスを使用する方法で読み込みしている。

<img src="~/assets/image/画像ファイル.jpg"/>

補足

※1　デプロイ時にサブディレクトリに配置されているので、URLは以下の形式になる

https://＜ユーザー名＞.github.io/＜リポジトリ名＞/

Discussion