😺

Astroで画像のパスでビルドエラー

2024/06/08に公開
2

AstroのブログサイトにTinaCMSでHero画像を追加するとビルドエラーが発生する

ホスティング先はCloudflare Pagesを使っていて、ローカルでビルドすると問題なく表示されるのですが、Cloudflare Pagesにビルド時にエラーが発生しました。

エラーの内容は、画像のパスがhttp://localhost:4321/images/example.jpgのように
ベースURLがhttp://localhost:4321になってしまいます。パスが正しくないので画像が見つからないというエラーです。

以下のようにAstro.url.originとしているので、ビルド時はhttp://example.comになると思っていたのですが、http://localhost:4321になってしまいます。

const imageUrl = post.image ? (post.image.startsWith('http') ? post.image : `${Astro.url.origin}${post.image}`) : '';

エラーメッセージの一部です

21:14:47.400	12:14:47   └─ /category/work/index.html[FailedToFetchRemoteImageDimensions] Failed to get the dimensions for http://localhost:4321/images/the_beach.jpg.
21:14:47.400	  Hint:
21:14:47.400	    Verify your remote image URL is accurate, and that you are not using `inferSize` with a file located in your `public/` folder.
21:14:47.401	  Error reference:
21:14:47.401	    https://docs.astro.build/en/reference/errors/failed-to-fetch-remote-image-dimensions/
21:14:47.401	  Stack trace:
21:14:47.401	    at getImage$1 (file:///opt/buildhome/repo/dist/chunks/_astro_assets_DUW25etl.mjs:82:13)
21:14:47.401	    at async getImage (file:///opt/buildhome/repo/dist/chunks/_astro_assets_DUW25etl.mjs:214:42)
21:14:47.401	    at async Promise.all (index 0)
21:14:47.401	    at async file:///opt/buildhome/repo/dist/chunks/Image_DpOlw8AW.mjs:272:13
21:14:47.458	Failed: Error while executing user command. Exited with error code: 1
21:14:47.469	Failed: build command exited with code: 1

解決方法

ひとまず行った解決方法は、Astro.url.originを使わずに、サイトのURLを直接指定する方法です…。

const site ='example.com';
const imageUrl = post.image ? (post.image.startsWith('http') ? post.image : `${site}${post.image}`) : '';

追記

コメントで教えていただいた方法で解決しました!ありがとうございます!!!

// astro.config.mjs
export default defineConfig({
  output: 'static',
  site: 'https://example.com', // ここでサイトのURLを指定する
...
});

Configuration Reference | Site

GitHubで編集を提案

Discussion

hayato07hayato07

astro.config.mjsファイル内の
defineConfigのsiteは設定されていますか?

kenken

siteを設定して意図した通りAstro.url.originで取得できるようになりました!ありがとうございます!!!