htmlファイルを直接開くときにpngファイルが読み込まれませんが、webstormから開くときにロードされます

Question

私のCSコースのjavascriptでゲームをしています。 Webstormを実行してドキュメントを開くと、正しく読み込まれますが、Finderからhtmlファイルを開くと、Webページが開きますが、スプライトの読み込みに使用しているpngファイルはありません。私はGoogle ChromeでInspect Elementを開いて、javascriptファイルは正しく読み込まれましたが、すべてのpngファイルはキャンセルされていました。これは、ゲームがWebstormから実行されたときに起こります（Webstormから実行すると、すべてのイメージファイルが正しく読み込まれます）。ゲームは、HTMLファイルから直接開かれ

（私は問題を抱えているとき、それはだ）webstormから開いたときにどのように、それはhttp://localhost:63342/CS%20Week%2010/CS105_Jessica.Davis_DogGame.html?_ijt=tmrr2fndgac82h07hlvt101gi4

を示していますが、クロムは、webaddressとしてHTMLドキュメントのパスを示していますFinderからhtmlファイルを開くと、すべてが正しく読み込まれるように、この問題を回避できますか？すべてのイメージファイルは、htmlファイルと同じディレクトリにあります。そのため、ブラウザのセキュリティの

Answer 1

、代わりにfile://を言ってのあなたはhttp://を言うことができるように、このようなファイルは、おそらくローカルWebサーバーを作っては何webstorm file://

で始まるURLから動作しない場合がありますロードします。ウェブサイトがfile://から画像を読み込むことができた場合、あなたが訪れたウェブページはあなたのコンピュータ上のファイルを検索し、同意なしにインターネットを介して送信することができます。サーバーが必要です。あなたのコンピュータで作業している場合、Webstormのようなローカルサーバーを作成し、そこで自分のファイルをホストすることができます。 githubページやcodepenのような別のサービスでホストしてください。

すべての画像が同じディレクトリにあるので、loadImageに電話するたびに、/User/user/whatever_other_directory_you_have_it_under/image.pngの代わりに画像の名前と拡張子を使用するようにしてください。

これを実行したら、プロジェクトのローカルWebサーバーを作成できます。ローカルサーバーを作成するには、ターミナル（ユーティリティの下のアプリケーション）を開き、cdと入力し、プロジェクトフォルダをドラッグしてターミナルにドロップし、Enterキーを押します。次に、python -m SimpleHTTPServerと入力して、Serving HTTP on 0.0.0.0 port 8000 ...のようになるまで待ちます。あなたのブラウザにアクセスしてhttp://0.0.0.0:8000と入力してください（あなたが持っているものを数字に置き換えてください。あなたがするまでこのリンクは機能しません）それ）

イメージは大丈夫です。サーバーを停止する必要がある場合は、端末に戻り、control+Cを押してください。

p5スケッチを提示すると、ローカルサーバーを作成した場合、誰も自分のコンピュータでWebサイトを表示できないことに注意してください。ローカルサーバーは、それを実行しているデバイスに隔離されています（ローカルサーバーを作成してプロジェクトファイルを作成しても問題ありません）。

世界中の誰とでもリンクを共有できるようにウェブサイトをホストしたい場合は、コードペインまたはギブスページを使用できます。もしあなたがcodepen.ioに行くなら、それは自己説明的でなければなりませんが、あなたの画像をtumblrなどの画像ホスティングサイトにアップロードして、それらの画像のURLソースをcodepenに追加するか、すべてをgithubに入れてより良いものにする必要があります結果！

githubページを使用するにはgithubアカウントを作成する必要があります（好ましくは、ユーザー名はページの名前を付けたいものです）。リポジトリをinsert_username_here.github.ioとします。リポジトリにファイルを追加します（すべてのサブディレクトリとフォルダをプロジェクトフォルダのままにしてください）。 1〜2分後にhttp://insert_username_here.github.ioにアクセスして、あなたの新しいホストされたウェブページを賞賛してください！

希望に役立ちます！