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

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

新規登録して質問してみよう
ただいま回答率
87.20%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

解決済

フォルダー中の画像を表示しようとすると、絶対パスだとできるのに、相対パスだとできないので、できるように。

onoko
onoko

総合スコア27

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

1回答

0評価

1クリップ

233閲覧

投稿2022/07/04 04:50

編集2022/07/05 05:55

JavaScript初心者です。
Runforitという名前で、6つの賽を交互に振り、出た目の得点を競って、早く100点になった人が勝ち、といったルールのゲームプログラムを作っています。
6つの賽を振るのを模して、Enterを押すことにより、6つの賽の出た目の画像を表示するのですけれども、これがソースのデータに画像の絶対パスを記載すると表示されるのですが、画像の相対パスをいれても表示されません。その場所に、画像の代わりの記号とaltの番号だけが映ります。
どうか画像を表示するための適切な方法をご教示下さい。

画像を表示できた絶対パス

JavaScript

let album = [ {src: 'C:/Users/spnc4/Downloads/Runforit/WebContent/WEB-INF/img/1.jpg' ,msg: '1'}, {src: 'C:/Users/spnc4/Downloads/Runforit/WebContent/WEB-INF/img/2.jpg' ,msg: '2'}, {src: 'C:/Users/spnc4/Downloads/Runforit/WebContent/WEB-INF/img/3.jpg' ,msg: '3'}, {src: 'C:/Users/spnc4/Downloads/Runforit/WebContent/WEB-INF/img/4.jpg' ,msg: '4'}, {src: 'C:/Users/spnc4/Downloads/Runforit/WebContent/WEB-INF/img/5.jpg' ,msg: '5'}, {src: 'C:/Users/spnc4/Downloads/Runforit/WebContent/WEB-INF/img/6.jpg' ,msg: '6'} ];

画像を表示できなかった相対パス

JavaScript

let album = [ {src: './img/1.jpg' ,msg: '1'}, {src: './img/2.jpg' ,msg: '2'}, {src: './img/3.jpg' ,msg: '3'}, {src: './img/4.jpg' ,msg: '4'}, {src: './img/5.jpg' ,msg: '5'}, {src: './img/6.jpg' ,msg: '6'} ];

賽の目の画像を画面に表示する部分のロジックです。

JavaScript

for(let m = 0; m < 6; m++) { let pipImage = document.createElement('img'); pipImage.setAttribute('src',album[roll[m]-1].src); pipImage.setAttribute('alt',album[roll[m]-1].msg); rollFlame.insertBefore(pipImage,null); } let pointNum = document.createElement('span'); let formatted; if(point===0){ formatted = " " + point; } else{ formatted = point; } pointNum.innerHTML = formatted; rollFlame.insertBefore(pointNum,null); if(s===t.length-1){ nextT=t[0]; } else{ nextT=t[s+1]; } let nextName = document.getElementById('name'+(nextT+1)); msg.textContent = name.value + ' さんの目です。つぎは ' + nextName.value + ' さんの番です。';

Javaプログラム(コントローラ部)

Java

import java.io.IOException; import javax.servlet.RequestDispatcher; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; public class Controller extends HttpServlet { private static final long serialVersionUID = 1L; public Controller() { super(); } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { RequestDispatcher dispatcher = request.getRequestDispatcher("WEB-INF/initialScreen.html"); dispatcher.forward(request, response); } }

プロジェクトの体系は以下の通りです。

プロジェクト名:Runforit

画面:initialScreen.html
絶対パス:C:/Users/spnc4/Downloads/Runforit/WebContent/WEB-INF/initialScreen.html

画像フォルダー:img(その内部に 画像データ 1.jpg,2.jpg,3.jpg,4.jpg,5.jpg,6.jpg が入っている.)
絶対パス:C:/Users/spnc4/Downloads/Runforit/WebContent/WEB-INF/img

JavaScriptとcssは、initialScreen.html中に書いてあります。
画面と画像フォルダーは同一ディレクトリ内にあります。

コントローラ: Controller.java
絶対パス:C:/Users/spnc4/Downloads/Runforit/Javaリソース/src/デフォルトパッケージ/Controller.java

Webサーバー Tomcat 6.0

よろしくお願いいたします。

良い質問の評価を上げる

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

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

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

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

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

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

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

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

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

SurferOnWww

2022/07/04 04:59

開発環境が分かりませんが、開発用の Web サーバーが使えればそれを使ってはいかがですか? そういう問題を未然に防いで余計な手間が省けると思います。
onoko

2022/07/04 05:05

サーバーはTomcat6,エディターはEclipse IDE です。
Lhankor_Mhy

2022/07/04 05:06

DevTools で見ると <img src="./img/1.jpg" alt="1"> というようなHTMLになっているかと思いますが、このパスの上で右クリック>「Open in new tab」として新しいタブで開いたときにアドレスバーに表示されているURLと、絶対パスとに違いはないですか?
SurferOnWww

2022/07/04 05:38

> サーバーはTomcat6 であれば、なぜ C:/Users/spnc4/Downloads/Runforit/WebContent/WEB-INF/img/1.jpg というようなパスを使うのでしょう? それはともかく、Web サーバー上のページ本体の URL は多分 http(s)://<ホスト名>/initialScreen.html だと思いますが、であれば画像の URL は http(s)://<ホスト名>/img/1.jpg で、initialScreen.html から見た画像の相対パスは img/1.jpg でよさそうですが?
onoko

2022/07/04 06:00

すいません、経験値不足で、DevToolsの使い方をよく知りません。あなた様のご提示の中の次の操作法をお教えください。 1.「DevTools で見ると <img src="./img/1.jpg" alt="1"> というようなHTMLになっているかと思いますが、」→ その操作法を具体的お願いします。 2.「このパスの上で右クリック>「Open in new tab」として新しいタブで開い」 →その操作法を具体的にお願いします。 どうぞ良しなに。
onoko

2022/07/04 06:11

SurferOnWww様 ご教示ありがとうございます。しかし img/1.jpg 以下で今テストしてみたところ、画像の代わりの記号とaltの番号が表示されるだけでした。私もどうして理屈通りのパスを入れて無効なのかわかりません。
Lhankor_Mhy

2022/07/04 06:14

1. Chromeでそのページを開いて、「1」などが表示されている上で、右クリック>「検証」とすると、Devtools が開いて、その部分のHTMLが表示されるかと思います。 2. これ以上の説明をどうしたらいいのかわからないのですが……一応やってみます。わからないことがあったらコメントしてください。 <img src="./img/1.jpg" alt="1"> の「./img/1.jpg」の上にポインタをマウスやトラックパッドなどで移動させて、上に乗ったな、と思ったら、マウスなどの2つあるボタンの内の右側を押します(Macなどのボタン一つの場合はたぶんコントロールキーを押しながら)。 そうすると、コンテキストメニューなどと呼ばれるメニューが出てきますから、そのメニューの中の「Open in new tab」(日本語版だと「別タブで開く」のような表示だと思います)にポインタを移動させて、上に乗ったな、と思ったらマウスなどのボタンを押してください。
SurferOnWww

2022/07/04 06:55

Web サーバー上のページ本体の URL は多分 http(s)://<ホスト名>/initialScreen.html だと思いますが、であれば画像の URL は http(s)://<ホスト名>/img/1.jpg になるはずなので、画像の url をブラウザのアドレスバーに入力して要求を出せば画像が表示されるはずです。試してみてください。
onoko

2022/07/04 07:23

SuferOnWww様 私にこの問題の前提の説明不足がありました。 このプロジェクトはJavaプログラムが中心でその位置は、 Runforit/Javaリソース/src/デフォルトパッケージ/Controller.java であり htmlと画像フォルダーは、 Runforit/WebContent/WEB-INF/initialScreen.html Runforit/WebContent/WEB-INF/img/1.jpg(以下同様) という体系となっています。 画面呼び出しのURLは http://localhost8080/Runforit/Controller です。 相済みません。
Lhankor_Mhy

2022/07/04 07:35

JavaScript ではなくて、Java の問題のようですね。 質問タグを変更してみては? おそらく、ブラウザは initialScreen.html を開いていないのだと思います。initialScreen.html はただのテンプレートで、なんらかのフレームワーク上で処理されて表示されているため、initialScreen.html からの相対パスでは通らない、という話ではないかと。 そうだとすると、そのフレームワークのお作法に従ってパスを記述することが必要になると思いますよ。
onoko

2022/07/04 08:59

Lhankor_Mhy様 ていねいなご説明ありがとうございました。Chromeで画面表示し、画像の代わりの記号の上を右クリック>「検証」し、開いたその部分のHTMLの上にのせて「Open in new tab」をマウスクリックすると次のような表示のある画面が出ました。 HTTPステータス 404 - /Runforit/img/1.jpg type:ステータスレポート メッセージ:/Runforit/img/1.jpg 説明:The requested resource is not available. 上記のパスは確かに存在しません。そこでRunforitとimgの間を埋めるべく、srcを、 ../../../Runforit/WebContent/WEB-INF/img/1.jpg(以下同様) と変えてみたところ、同じく、 HTTPステータス 404 - /Runforit/WebContent/WEB-INF/img/1.jpg type:ステータスレポート メッセージ:/Runforit/WebContent/WEB-INF/img/1.jpg 説明:The requested resource is not available. 無知な予想かもしれませんが、先頭の/が取れれば画像が取得できるのでしょうか。
Lhankor_Mhy

2022/07/04 09:13

繰り返しになってしまいますが、JavaScript ではなくて、Java の問題だと思います。 フレームワークのお作法に従ってパスを記述することが必要になると思いますので、Javaに詳しい回答者に見ていただくために、質問タグを見直してはいかがでしょうか?
onoko

2022/07/04 09:20

Lhankor_Mhy様 重ねてありがとうございます。ただ今「運営へのお問い合わせ」ページから、この質問へのJavaタグの追加要望を送信致しました。
YT0014

2022/07/04 09:52

質問は質問者が修正することができ、タグの追加・削除も、その一環として行うことが可能です。 質問文の直後に表示される、「編集」をクリックしてください。

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。