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
よろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー