jQuery .css() method doesnt put background image - error resource not found

this is part of my code

main.js:

var images = [
"C:\\...\\Cards\\image1.jpg",
"C:\\....\\Cards\\image2.jpg",
"C:\\.....\\Cards\\image3.jpg"
]

$.each(images , function(i, val) {$("#picturebox").append("<div class='card' 
id='" + i + "'><div class='front'></div><div class='back' data-img='" + val 
+ "'></div></div>");
});     

$.each(images, function(i, val) { $("#"+ i + " div:eq(1) 
").css({"background-image": "url(" + val + ")", "background-repeat": "no-
repeat", "background-position" : "center"});
});

css:

#boxcard {
 margin-bottom: 0px; 
}

.card{  
 cursor: point; 
}

.card .front{
 border: 4px solid black;
 background: yellow;
 border-radius: 10px;
}

.back{
 border-radius: 10px;
}

html:

<div id="picturebox"></div>

file-overview: html file, css file, main file, Cards folder in which pictures are

I want to have cards that display pictures on my website. But somehow the .css() method doesnt work. Console says: error resource not found. In the console it is written that the file couldnt be found because either deleted or displaced.

What is the problem please??!

Thank you very much in advance!

Solution

Remember, when using the jquery css function, the css property will be put in the html in which the code is applied (inspect element to see the result). In this case, you have to edit the file path, make it relative to the html file (not the js file) For example there is a folder called images right outside of the js file, instead of writing ../images/filename.png you must write images/filename.png