4

このチュートリアル ( http://www.lemiffe.com/how-to-deploy-a-static-page-to-heroku-the-easy-way/ )を使用して静的 HTML Web サイトを Heroku にデプロイしたところ、私の写真は「現れない？ローカルで完璧に動作するので、Heroku にデプロイしたときに動作しない理由がよくわかりません。

また、stackoverflow が提供する他のすべてのソリューションも調べましたが、何もうまくいきませんでした。どんな助けでも本当に感謝しています

これが私のフォルダー/ファイルの順序です（フォルダーは大文字です）：

-RESUMEAPPCOPY
  -home.html
  -portfolio.html
  -index.php
  -aboutme.html
-PUBLIC
  -IMG
  -JS
  -CSS

画像のコード:

 <img src="/Users/erv/Desktop/MyProjects/resumeappcopy/public/img/PennUnitedWebsite.PNG" alt="PUSA-Icon" class="img-rounded" style="height: 300px;"/>

Heroku の要素を検査するたびに、次のように表示されます。

Failed to load resource: the server responded with a status of 404 (Not Found)

そして、画像があるはずの場所に、典型的な壊れた画像リンクの画像があります

4

10 に答える 10

6

タグは、ローカル ファイル システムに存在する絶対<img>パスを指していますが、Heroku アプリには存在しません。代わりに、イメージ アセットへの相対パス (タグを呼び出す HTML ファイルに対する相対パス) を指定し、変更をバージョン管理にコミットしてから、Heroku に再デプロイします。<img>

publicディレクトリが実際にディレクトリ内にネストされていると仮定するとresumeappcopy、次のパスが機能するはずです。

<img src="public/img/PennUnitedWebsite.png" alt="PUSA-Icon" class="img-rounded" style="height: 300px;"/>

更新：

PNG 引用されたアセット URL は、ファイル拡張子が大文字のアセットを指していることに注意してください。ただし、ファイルの実際のファイル拡張子は小文字pngの–です(こちらを参照)。ローカル ファイルシステムは、リソースを検索するときに大文字と小文字を区別しない可能性がありますが、Heroku はそうではありません。Heroku にデプロイするときは、リソースの正しい大文字と小文字を適切に呼び出していることを確認する必要があります。

于 2013-07-29T16:05:48.883 に答える
5

私は同じ問題を抱えていて、問題は大文字のファイルタイプ（「.PNG」）であることがわかりました。Heroku は .toLowerCase() 関数を適用せずにファイルを検索していると思います。つまり、大文字と小文字を区別して、マークアップとファイルが完全に一致するように要求する必要があります。

これは、私のローカル ノード/エクスプレス サーバーでは問題ではありませんでしたが、Heroku にデプロイした後で問題になりました。一部の画像は表示されましたが、他の画像では 404 エラーが発生しました (つまり、大文字のファイル タイプの画像)。賢明なことは、ファイルの種類を常に小文字にすることです。

私はこれを変更しました：

<img src="public/img/PennUnitedWebsite.PNG" alt="PUSA-Icon" class="img-rounded" style="height: 300px;"/>

これに：

<img src="public/img/PennUnitedWebsite.png" alt="PUSA-Icon" class="img-rounded" style="height: 300px;"/>

少なくとも 1 時間は混乱したため、この問題に遭遇したすべての人に役立つことを願っています。幸運を！

于 2014-02-17T15:16:50.993 に答える
3

画像への絶対パスを指定しています：

/Users/erv/Desktop/MyProjects/resumeappcopy/public/img/PennUnitedWebsite.PNG

イメージはローカルで動作しますが、このディレクトリがローカル マシンに存在するためです。Heroku には存在しません。

Heroku / サーバーによって提供されているディレクトリからの相対パスを使用する必要があります。

/../PUBLIC/img/PennUnitedWebsite.PNG (これは、リンクがディレクトリ内の HTML ファイルに存在することを前提としていますRESUMEAPPCOPY)

于 2013-07-29T16:00:51.597 に答える
0

要約すると、画像を適切にロードするには:
1) index.html に相対する相対 URL パスを使用する
2) 画像ファイルの拡張子は jpg ではなく png にする必要があり、小文字で記述する必要があります (例: "cat.png")。

于 2017-11-28T02:11:23.580 に答える
-1

最近、Windows OSで同様の問題が発生しました。ローカルでテストしたときに画像が正しく読み込まれましたが、heroku では一部の画像が読み込まれ、他の画像は読み込まれませんでした。そして写真は同じフォルダにありました！私のパスとスクリプトは正しかったのですが、他の人が言ったように、大文字と小文字を区別する問題でした。ファイルの名前を変更し、再度アップロードしましたが、役に立ちませんでした。なんで？大文字と小文字の変更は、Windows 上の git の実際の変更として認識されないためです。新しく名前を付けたファイルを適切にロードするために、これらの手順を実行しました (すべてのコマンドは heroku チュートリアル ページにあります)。

  1. heroku アプリを破棄して新しいアプリを作成する
  2. ディレクトリから .git フォルダーを削除します
  3. アプリ用の新しい git リモートを作成する
  4. すべてのファイルを再度プッシュします

このようにして、heroku ファイルには好きなようにファイル名が付けられます。私のために働いた。

于 2018-10-02T09:38:41.573 に答える