開発サーバーでは画像が出るのに、共有したページでは出ない。そんなときは、ファイルの有無と「ブラウザが探している場所」を分けて確認すると原因を絞れます。
Plopinoを開発している立場から、/b/ID/ 配下で静的HTMLを配信する際のパスの注意点を整理します。特定のサービスに限らず、サブディレクトリに置く静的ページで使える確認方法です。
前提を固定する
想定するファイル構成は次のとおりです。HTMLには base 要素を置いていません。
index.html
assets/
logo.svg
site.css
pages/
details.html
公開ページの最終URLを https://example.com/b/demo/ とします。このドメインとパスは説明用で、実在するデモではありません。
| HTMLに書いた参照 | 解決後のパス |
|---|---|
| /assets/logo.svg | /assets/logo.svg |
| ./assets/logo.svg | /b/demo/assets/logo.svg |
| assets/logo.svg | /b/demo/assets/logo.svg |
先頭の / はサイトのルートを指します。アップロードしたディレクトリのルートではありません。実際にサイトのルートに置いた共通ファイルを読むなら正しい書き方ですが、この構成のロゴには合いません。
URLの計算だけを、サーバーから切り離す
次を check-paths.mjs として保存し、node check-paths.mjs で実行できます。ネットワーク通信は発生しません。
import assert from 'node:assert/strict';
const cases = [
['https://example.com/b/demo/', '/assets/logo.svg', '/assets/logo.svg'],
['https://example.com/b/demo/', './assets/logo.svg', '/b/demo/assets/logo.svg'],
['https://example.com/b/demo/', 'assets/logo.svg', '/b/demo/assets/logo.svg'],
['https://example.com/b/demo/pages/details.html', '../assets/logo.svg', '/b/demo/assets/logo.svg'],
['https://example.com/b/demo/assets/site.css', './logo.svg', '/b/demo/assets/logo.svg'],
['https://example.com/b/demo', './assets/logo.svg', '/b/assets/logo.svg'],
];
for (const [base, reference, expected] of cases) {
const actual = new URL(reference, base).pathname;
assert.equal(actual, expected);
console.log(reference + ' + ' + base + ' => ' + actual);
}
console.log(cases.length + ' URL checks passed');
この6ケースは実際にNode.jsで実行し、すべての比較が通ることを確認しています。
ここで確認できるのは参照先の計算結果だけです。ファイルが存在すること、HTTPで取得できること、画像として表示できることは別の検証です。
./への一括置換では直らないケース
子ページ。 pages/details.html から同じロゴを読むなら ../assets/logo.svg です。./assets/logo.svg では pages/assets/ を探します。
外部CSS。 assets/site.css の url('./logo.svg') はCSSファイルの位置が基準です。HTMLの位置に合わせて書き換えると壊れる場合があります。base 要素があるHTMLでは、文書の基準URLも確認してください。
末尾のスラッシュ。 /b/demo と /b/demo/ では、相対参照の基準ディレクトリが異なります。サービス側でリダイレクトされる場合もあるので、入力したURLだけでなく、移動後のアドレスを使って確認します。
最後はNetworkタブで確かめる
- 公開URLを開き、開発者ツールのNetworkタブを表示して再読み込みする。
- 表示されない画像のRequest URLを確認する。
- 想定したパス、ファイル名の大文字・小文字、アップロードしたフォルダ構造を照合する。
- ステータスコードに加えてレスポンス本文を見る。200でもログイン画面やHTMLのエラーページなら、画像は読み込めない。
- 閲覧者向けのリンクをログアウト状態でも開く。作成者の権限で見えているだけ、という可能性を分ける。
単一HTMLを渡すなら参照する画像を埋め込む方法もあります。別ファイルを使うなら、HTMLと参照先をまとめて渡します。「ファイルを含めること」と「そこを指すこと」の両方がそろって初めて表示できます。