😺
Astroで画像のパスでビルドエラー
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を指定する
...
});
Discussion
astro.config.mjs
ファイル内のdefineConfigのsiteは設定されていますか?
siteを設定して意図した通り
Astro.url.origin
で取得できるようになりました!ありがとうございます!!!