Q&A
もしかしたら、画像のサイズがでかいとか・・
それでしたら、jpgをpngに変えてみては？
p5.jsで画像が読み込めない(Loading...で先に進まない)
p5.jsで画像表示を試しています。
画像を読み込む処理で、ブラウザーには、「Loading・・・」が表示され、
先に進みません。
発生している問題・エラーメッセージ
画像を読み込む処理で、ブラウザーには、「Loading・・・」が表示され、 先に進まない。 Windowsのローカル環境でテストしていますが、 ローカルでは動かないということはありますか？
該当のソースコード
■jsファイル let img; // setup()より先に呼び出される function preload() { img = loadImage('00.jpg'); } function setup() { // 読み込む画像のサイズは480 x 240 createCanvas(480, 120); } // イメージをキャンバスに描画する function draw() { image(img, 0, 0); } ■htmlファイル <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>サンプル</title> <script> </script> </head> <body> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.min.js"></script> <script src="image_test.js"></script> </body> </html>
試したこと
p5.jsを利用せず、画像の表示を確認した。
画像ファイルのpath問題ないと思います。
■HTMLで表示したHTML
<html> <head> <title>画像表示確認</title> </head> <body> <img src="00.jpg"> </body> </html>補足情報（FW/ツールのバージョンなど）
なし
ご回答ありがとうございます。
小さなファイルですのd、多少の遅れはあっても表示ができなるなるほどのサイズではありません。
ベストアンサーで解決となりました。
そうですか。よかったです(^^)
回答2件
0
ベストアンサー
Windowsのローカル環境でテストしていますが、
ローカルでは動かないということはありますか？
これですね。
エクスプローラから html ファイルを開くだけだと、
ブラウザの開発ツールで見ると、下記のようなエラーが出てると思います。
Access to image at 'file:///.../.../00.png' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
ローカルサーバ立てれば動作すると思うので、
例えば エディタに VS Code 使ってるなら、 Live Server という拡張機能で動かしてみると良いと思います。
投稿2019/10/12 16:13
編集2019/10/12 16:17
総合スコア484
ご回答ありがとうございます。
少し、明かりが見えてきた感じです。
一旦、とりあえずの状況をご連絡いたします。
＜１＞開発環境でのエラー表示
・開発環境は使ったことがないため、的確な操作ができたのか不明ですが、
ご指摘いただいたエラーは、今のところ表示されていません。
引き続き確認いたします。
＜２＞ローカルサーバーの利用
・VS code を使っていますが、テキストエディター代わりに使っている程度です。
・サーバー機能を使えるのは、全く知りませんでした。
・ググりながら、確認してみます。
どちらも、ググるまでもなく試してみませんか。
(1) 開発ツール
「開発ツール」はたいていのブラウザには、もともとついてて
Chrome の場合だと右クリックで「検証」を押すと出てくる画面を指してます。
「コンソール」というタブがあるはずなので、エラーがある場合は、そこに出ます。
(2) ローカルサーバ
VS Code の左側の「田」みたいなアイコンを押すと拡張機能の検索画面になるので、
そこで「Live Server」を検索してインストール。
VS Code では、HTMLを置いたフォルダを開いたあと、下のバーに出てる「Go Live」のアイコンを押す。
そうすると、ブラウザが勝手に起動する。
情報ありがとうございます。結果を記載します。
(1)開発ツール
・ご説明いただい方法をChromで行い、同じエラー表示を確認できました。
(2)ローカルサーバー
・ご説明いただいた手順で、拡張機能を追加し、
ローカルサーバーを利用することで、画像の表示ができました。
・ご指摘の通り、パソコンのフォルダーで起動していたのが、画面を読み込めない原因でした。
・VS Code のエクスプロラ画面で、htmlファイルの起動や画像の表示もできて、なかなか便利ですね。今まで、Windowsのエクスプローラと VS Codeを行き来していたのに比べて楽になりました。
以上、２点とも解決しました。
ありがとうございました。
結果連絡ありがとうございます。
いろいろ解決したということで、安心しました。
0
定番としてはやはり疑うのはファイルのパス。
画像ファイルのpath問題ないと思います。
その根拠は? 別に問い詰めるわけじゃないですが、トラブル解析の過程としては「これこれこうだから、大丈夫と判断した」という情報を載せるべきじゃないでしょうか。あなたがいくら思っても駄目なときは駄目なわけで、解決に至っていない以上はそれまでの判断になにかミス・見落とし等があるはず、でしょ?
私の試したところでは、
ProcessingのJavaモードであればプロジェクトディレクトリ(フォルダ)の下のdataディレクトリが読み出しのデフォルトなのですが、p5.jsではプロジェクトディレクトリからデータを読んでいるようです。
投稿2019/10/12 00:37
総合スコア7703
ご回答ありがとうございます。
ご指摘いただいたことを念頭に、再度テストしましたが、状況は変わりません。
引き続きご支援いただけますよう、お願いいたします。
＜１＞pathの検証方法
・検証ですが、当初の質問の最後に記述しているように、
p5.jsを使わないで、同じpathで指定したHTMLの
<body>
<img src="00.jpg">
</body>
で、画像が表示でき、
・p5.jsは下記の通りなので
function preload() {
img = loadImage('00.jpg');
}
どちらも、作業フォルダーの'00.jpg’を指定しており、pathは問題はないと判断しましたが、
これでは検証になっていないのでしょうか？
pathの確認方法をご教授いただけると助かります。
＜２＞念のため、画像を作業フォルダー/data に移動し
function preload() {
img = loadImage('data/00.jpg');
}
で、やってみましたが、変化なく「Loading...」を表示して先に進みません。
<body>
<img src="data/00.jpg">
</body>
では、画像は表示されます。
※当初の質問の前に、いろいろサンプルを見ましたが、画像ファイルは
・直下に追いているもの
・imagesファルダに置いているもの
があり、両方テストしましたが、同じ結果でしたので、
当初の質問では、画像は作業フォルダー直下に置きました。
＜３＞画像を置かないで、
<body>
<img src="00.jpg">
</body>
として、HTMLを起動すると、もちろん図形は表示されませんが、
「Loading...」も表示されません。
＜４＞preload()部分をコメントアウトし、draw()にrectを追加すると正しく表示されるので、
他の部分に誤りはないと判断しています。
＜５＞ローカルでテストしたと当初の質問で記述しましたが、
フォルダ構成は下記の通りです。
・PCの作業フォルダーに、下記を置きました。
・image_test.html ← 起動用のHTML
・image_test.js ← p5.js
・00.jpg ← 画像ファイル
・notP5.html ← 画像を表示できたHTML
・当初の質問でも、記述しましたが、
ローカルでは動かないということがあるのでしょうか？
以上、よろしくお願いします。
私はProcessing IDEから実行を掛けていたのですが、内部的にサーバを建てているようですね。
その後(一旦ブラウザを全て閉じた状態から)直接ファイルを開いて画像が表示されていたのでサーバの影響ではないだろうと考えていたのですが、先程別のブラウザで直接ファイルを開こうとしたところ症状が出ました。同一のブラウザではキャッシュを見ていたかなにかのようです。
Webサーバ経由で開かなければいけない、という線が濃厚に思えて来ました。
ご確認、ありがとうございます。
thkanaさんに教えていただいた方法でやってみます。
あなたの回答
tips
プレビュー
