質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.23%

JavaScript(p5.js)で画像が読み込めない。

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 877

m.takako

score 13

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/ツールのバージョンなど)

なし

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • 退会済みユーザー

    退会済みユーザー

    2019/10/14 09:27

    もしかしたら、画像のサイズがでかいとか・・
    それでしたら、jpgをpngに変えてみては?

    キャンセル

  • m.takako

    2019/10/17 12:54

    ご回答ありがとうございます。
    小さなファイルですのd、多少の遅れはあっても表示ができなるなるほどのサイズではありません。
    ベストアンサーで解決となりました。

    キャンセル

  • 退会済みユーザー

    退会済みユーザー

    2019/10/18 14:00

    そうですか。よかったです(^^)

    キャンセル

回答 2

checkベストアンサー

+2

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/13 08:17

    ご回答ありがとうございます。
    少し、明かりが見えてきた感じです。
    一旦、とりあえずの状況をご連絡いたします。

    <1>開発環境でのエラー表示
      ・開発環境は使ったことがないため、的確な操作ができたのか不明ですが、
       ご指摘いただいたエラーは、今のところ表示されていません。
       引き続き確認いたします。


    <2>ローカルサーバーの利用
      ・VS code を使っていますが、テキストエディター代わりに使っている程度です。
      ・サーバー機能を使えるのは、全く知りませんでした。
      ・ググりながら、確認してみます。

    キャンセル

  • 2019/10/13 11:21

    どちらも、ググるまでもなく試してみませんか。

    (1) 開発ツール
    「開発ツール」はたいていのブラウザには、もともとついてて
    Chrome の場合だと右クリックで「検証」を押すと出てくる画面を指してます。
    「コンソール」というタブがあるはずなので、エラーがある場合は、そこに出ます。

    (2) ローカルサーバ
    VS Code の左側の「田」みたいなアイコンを押すと拡張機能の検索画面になるので、
    そこで「Live Server」を検索してインストール。
    VS Code では、HTMLを置いたフォルダを開いたあと、下のバーに出てる「Go Live」のアイコンを押す。
    そうすると、ブラウザが勝手に起動する。

    キャンセル

  • 2019/10/15 11:16

    情報ありがとうございます。結果を記載します。

    (1)開発ツール
    ・ご説明いただい方法をChromで行い、同じエラー表示を確認できました。

    (2)ローカルサーバー
    ・ご説明いただいた手順で、拡張機能を追加し、
    ローカルサーバーを利用することで、画像の表示ができました。
    ・ご指摘の通り、パソコンのフォルダーで起動していたのが、画面を読み込めない原因でした。
    ・VS Code のエクスプロラ画面で、htmlファイルの起動や画像の表示もできて、なかなか便利ですね。今まで、Windowsのエクスプローラと VS Codeを行き来していたのに比べて楽になりました。

    以上、2点とも解決しました。
    ありがとうございました。

    キャンセル

  • 2019/10/15 11:30

    結果連絡ありがとうございます。
    いろいろ解決したということで、安心しました。

    キャンセル

+1

定番としてはやはり疑うのはファイルのパス。

画像ファイルのpath問題ないと思います。

その根拠は? 別に問い詰めるわけじゃないですが、トラブル解析の過程としては「これこれこうだから、大丈夫と判断した」という情報を載せるべきじゃないでしょうか。あなたがいくら思っても駄目なときは駄目なわけで、解決に至っていない以上はそれまでの判断になにかミス・見落とし等があるはず、でしょ?

私の試したところでは、
ProcessingのJavaモードであればプロジェクトディレクトリ(フォルダ)の下のdataディレクトリが読み出しのデフォルトなのですが、p5.jsではプロジェクトディレクトリからデータを読んでいるようです。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/10/12 23:41

    ご回答ありがとうございます。
    ご指摘いただいたことを念頭に、再度テストしましたが、状況は変わりません。
    引き続きご支援いただけますよう、お願いいたします。

    <1>pathの検証方法
     ・検証ですが、当初の質問の最後に記述しているように、
      p5.jsを使わないで、同じpathで指定したHTMLの
      <body>
            <img src="00.jpg">
        </body>
      で、画像が表示でき、
     ・p5.jsは下記の通りなので
    function preload() {
        img = loadImage('00.jpg');
    }
      どちらも、作業フォルダーの'00.jpg’を指定しており、pathは問題はないと判断しましたが、
      これでは検証になっていないのでしょうか?
      pathの確認方法をご教授いただけると助かります。

    <2>念のため、画像を作業フォルダー/data に移動し
    function preload() {
        img = loadImage('data/00.jpg');
    }
      で、やってみましたが、変化なく「Loading...」を表示して先に進みません。
      <body>
            <img src="data/00.jpg">
        </body>
      では、画像は表示されます。
      ※当初の質問の前に、いろいろサンプルを見ましたが、画像ファイルは
       ・直下に追いているもの
       ・imagesファルダに置いているもの
      があり、両方テストしましたが、同じ結果でしたので、
      当初の質問では、画像は作業フォルダー直下に置きました。

    <3>画像を置かないで、
      <body>
            <img src="00.jpg">
        </body>
      として、HTMLを起動すると、もちろん図形は表示されませんが、
      「Loading...」も表示されません。

    <4>preload()部分をコメントアウトし、draw()にrectを追加すると正しく表示されるので、
      他の部分に誤りはないと判断しています。

    <5>ローカルでテストしたと当初の質問で記述しましたが、
      フォルダ構成は下記の通りです。
      ・PCの作業フォルダーに、下記を置きました。
        ・image_test.html ← 起動用のHTML
        ・image_test.js   ← p5.js
        ・00.jpg      ← 画像ファイル
        ・notP5.html    ← 画像を表示できたHTML
      ・当初の質問でも、記述しましたが、
       ローカルでは動かないということがあるのでしょうか?
      
    以上、よろしくお願いします。

    キャンセル

  • 2019/10/13 09:39

    私はProcessing IDEから実行を掛けていたのですが、内部的にサーバを建てているようですね。
    その後(一旦ブラウザを全て閉じた状態から)直接ファイルを開いて画像が表示されていたのでサーバの影響ではないだろうと考えていたのですが、先程別のブラウザで直接ファイルを開こうとしたところ症状が出ました。同一のブラウザではキャッシュを見ていたかなにかのようです。

    Webサーバ経由で開かなければいけない、という線が濃厚に思えて来ました。

    キャンセル

  • 2019/10/13 18:08

    ご確認、ありがとうございます。
    thkanaさんに教えていただいた方法でやってみます。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.23%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる