Javascript can't find image files

Question

I keep getting Resource Not Found for the image files that I am trying to load into var manifest. Can't figure out whats wrong, as best I can tell I am following the tutorial code exactly...

(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();

})();

Where do you have the files at in your project, as far as directory structure? — Chris Hayes, Nov 10 '12 at 05:27

score 1 · Answer 1 · answered Nov 10 '12 at 05:50

picture will get more clear to us if you will send us you directory structure: For Now you can try This code

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" }
    ];

score 0 · Answer 2 · edited May 23 '17 at 12:00

You've got to keep in mind that whenever you are running javascript, the path is relative to the page currently running the script, unlike CSS or HTML where the path is relative to the location of the file. So, using relative paths can cause headaches.

You can create a global reference to the image path, however.

See this post for more details and working solutions:

Relative Paths in Javascript in an external file

Javascript can't find image files

2 Answers2