Javascript無法找到圖像文件

Question

我一直在爲我試圖加載到var清單中的圖像文件獲取Resource Not Found。無法弄清楚什麼是錯，盡我可以告訴我究竟以下的教程代碼...

(function() { 
    "use strict"; 

    WinJS.Binding.optimizeBindingReferences = true; 

    var app = WinJS.Application; 
    var activation = Windows.ApplicationModel.Activation; 

    var canvas, context, stage; 
    var bgImage, p1Image, p2Image, ammoImage, p1Lives, p2Lives, title, endGameImage; 
    var bgBitmap, p1Bitmap, p2Bitmap, ammoBitmap; 
    var preload; 

    var SCALE_X = window.innerWidth/800; 
    var SCALE_Y = window.innerHeight/480; 
    var MARGIN = 25; 
    var GROUND_Y = 390 * SCALE_Y; 

    app.onactivated = function (args) { 
    if (args.detail.kind === activation.ActivationKind.launch) { 
     if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) { 
      // TODO: This application has been newly launched. Initialize 
      // your application here. 
     } else { 
      // TODO: This application has been reactivated from suspension. 
      // Restore application state here. 
     } 
     args.setPromise(WinJS.UI.processAll()); 
    } 
}; 



function intialize() { 

    var manifest = [ 
     { id: "screenImage", src: "images\Backgrounds\gameplay_screen.png" }, 
     { id: "redImage", src: "images\Catapults\Red\redIdle\redIdle.png" }, 
     { id: "blueImage", src: "images\Catapults\Blue\blueIdle\blueIdle.png" }, 
     { id: "ammoImage", src: "CatapultGame\images\Ammo\rock_ammo.png" }, 
     { id: "winImage", src: "images\Backgrounds\victory.png" }, 
     { id: "loseImage", src: "images\Backgrounds\defeat.png" }, 
     { id: "blueFire", src: "images\Catapults\Blue\blueFire\blueCatapult_fire.png" }, 
     { id: "redFire", src: "images\Catapults\Red\redFire\redCatapult_fire.png" } 
    ]; 

    canvas = document.getElementById('gameCanvas'); 
    canvas.width = window.innerWidth; 
    canvas.height = window.innerHeight; 
    context = canvas.getContext("2d"); 



    stage = new createjs.Stage(canvas); 

    //Preload Images 
    preload = new createjs.PreloadJS(); 
    preload.onComplete = prepareGame;  

    preload.loadManifest(manifest); 
    } 


function prepareGame() { 

    bgImage = preload.getResult('screenImage').result; 
    bgBitmap = new createjs.Bitmap(bgImage); 
    bgBitmap.scaleX = SCALE_X; 
    bgBitmap.scaleY = SCALE_Y; 
    stage.addChild(bgBitmap); 

    stage.update; 
} 

function gameLoop() { 
    update(); 
    draw(); 
} 

function draw() { 

} 

function update() { 

} 

app.oncheckpoint = function (args) { 
    // TODO: This application is about to be suspended. Save any state 
    // that needs to persist across suspensions here. You might use the 
    // WinJS.Application.sessionState object, which is automatically 
    // saved and restored across suspension. If you need to complete an 
    // asynchronous operation before your application is suspended, call 
    // args.setPromise(). 
}; 

document.addEventListener("DOMContentLoaded", intialize, false); 
app.start(); 

})(); 

Answer 1

你一定要記住，當你正在運行的JavaScript，路徑是相對於頁面當前正在運行腳本，與CSS或HTML不同，其中路徑是相對於文件的位置。所以，使用相對路徑可能會導致頭痛。

但是，您可以創建對圖像路徑的全局引用。

看到這個職位的詳細信息和工作方案：

Relative Paths in Javascript in an external file

Answer 2

圖片會獲得更多的清楚地告訴我們，如果你將發送給我們你的目錄結構： 現在你可以試試這個代碼

var manifest = [ 
     { id: "screenImage", src: "/images/Backgrounds/gameplay_screen.png" }, 
     { id: "redImage", src: "/images/Catapults/Red/redIdle/redIdle.png" }, 
     { id: "blueImage", src: "/images/Catapults/Blue/blueIdle/blueIdle.png" }, 
     { id: "ammoImage", src: "/CatapultGame/images/Ammo/rock_ammo.png" }, 
     { id: "winImage", src: "/images/Backgrounds/victory.png" }, 
     { id: "loseImage", src: "/images/Backgrounds/defeat.png" }, 
     { id: "blueFire", src: "/images/Catapults/Blue/blueFire/blueCatapult_fire.png" }, 
     { id: "redFire", src: "/images/Catapults/Red/redFire/redCatapult_fire.png" } 
    ];