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

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

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

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

Q&A

解決済

1回答

459閲覧

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

onoko

総合スコア40

JavaScript

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

0グッド

1クリップ

投稿2022/07/04 04:50

編集2022/07/05 05:55

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

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

JavaScript

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

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

JavaScript

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

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

JavaScript

1for(let m = 0; m < 6; m++) { 2 let pipImage = document.createElement('img'); 3 pipImage.setAttribute('src',album[roll[m]-1].src); 4 pipImage.setAttribute('alt',album[roll[m]-1].msg); 5 rollFlame.insertBefore(pipImage,null); 6 } 7 let pointNum = document.createElement('span'); 8 let formatted; 9 if(point===0){ 10 formatted = " " + point; 11 } 12 else{ 13 formatted = point; 14 } 15 pointNum.innerHTML = formatted; 16 rollFlame.insertBefore(pointNum,null); 17 18 if(s===t.length-1){ 19 nextT=t[0]; 20 } 21 else{ 22 nextT=t[s+1]; 23 } 24 let nextName = document.getElementById('name'+(nextT+1)); 25 msg.textContent = name.value + ' さんの目です。つぎは ' + nextName.value + ' さんの番です。'; 26 27

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

Java

1import java.io.IOException; 2 3import javax.servlet.RequestDispatcher; 4import javax.servlet.ServletException; 5import javax.servlet.http.HttpServlet; 6import javax.servlet.http.HttpServletRequest; 7import javax.servlet.http.HttpServletResponse; 8 9public class Controller extends HttpServlet { 10 private static final long serialVersionUID = 1L; 11 12 13 public Controller() { 14 super(); 15 } 16 17 18 protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 19 RequestDispatcher dispatcher = request.getRequestDispatcher("WEB-INF/initialScreen.html"); 20 dispatcher.forward(request, response); 21 } 22} 23

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

プロジェクト名: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

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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

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と、絶対パスとに違いはないですか?
退会済みユーザー

退会済みユーザー

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」(日本語版だと「別タブで開く」のような表示だと思います)にポインタを移動させて、上に乗ったな、と思ったらマウスなどのボタンを押してください。
退会済みユーザー

退会済みユーザー

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

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

回答1

0

自己解決

結局、プロジェクトにJavaコントローラを使うのをやめ、簡明そうなhtmlとimgフォルダーのみに改組して、Chromeで表示してみたところ、./img/1.jpg の使用でも画像が出て、問題が解決しました。根気強い多大なご助力ありがとうございました。

投稿2022/07/04 20:55

onoko

総合スコア40

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.51%

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

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

質問する

関連した質問