Браузер не отображает изображения, созданные Javascript

Так что я строю простую html/javascript игру. Я написал сценарий, который отображает массив 2d в виде сетки изображений. Дело в том, что он создает все imgs, правильно назначает класс и src, путь выглядит нормально, но все же изображения не отображаются.Браузер не отображает изображения, созданные Javascript

Вот код:

var stage = document.getElementById('stage'); 
 
var output = document.getElementById('output'); 
 

 
var map = [ 
 
\t [1, 0, 0, 0, 0, 3], 
 
\t [0, 0, 0, 0, 0, 0], 
 
\t [0, 0, 1, 0, 2, 0], 
 
\t [0, 0, 0, 0, 0, 0], 
 
\t [0, 0, 0, 0, 0, 0], 
 
\t [0, 0, 0, 0, 1, 0] 
 
]; 
 

 
var water = 0; 
 
var island = 1; 
 
var pirate = 2; 
 
var home = 3; 
 

 
var size = 64; 
 

 
var rows = map.length; 
 
var columns = map[0].length; 
 

 

 

 
function render() { 
 
\t for (var row = 0; row < rows; row++) { 
 
\t \t for (var column = 0; column < columns; column++) { 
 
\t \t \t var cell = document.createElement('img'); 
 
\t \t \t cell.setAttribute('class', 'cell'); 
 
\t \t \t stage.appendChild(cell); 
 
\t \t \t switch(map[row][column]) { 
 
\t \t \t \t case water: cell.src = "../img/water.jpg"; 
 
\t \t \t \t \t break; 
 
\t \t \t \t case island: cell.src = "../img/island.png"; 
 
\t \t \t \t \t break; 
 
\t \t \t \t case pirate: cell.src = "../img/pirate.png"; 
 
\t \t \t \t \t break; 
 
\t \t \t \t case home: cell.src = "../img/home.png"; 
 
\t \t \t \t \t break; 
 
\t \t \t }; 
 
\t \t \t cell.style.top = row * size + "px"; 
 
\t \t \t cell.style.left = column * size + "px"; 
 
\t \t } 
 
\t } 
 
}; 
 

 
render();

#stage { 
 
    position: relative; 
 
    width: 384px; 
 
    height: 384px; 
 
} 
 

 
.cell { 
 
    display: block; 
 
    position: absolute; 
 
    width: 64px; 
 
    height: 64px; 
 
} 
 

 
p { 
 
    width: 400px; 
 
}

<!doctype html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>The HTML5 Herald</title> 
 
    <meta name="description" content="The HTML5 Herald"> 
 
    <meta name="author" content="SitePoint"> 
 
    <link rel="stylesheet" href="css/main.css"> 
 
</head> 
 

 
<body> 
 
\t <div id="stage"></div> 
 
\t <p id="output"></p> 
 
\t <script src="js/main.js"></script> 
 
</body> 
 
</html>

источник

2016-01-30 lip3k

Это проблема с путями - с помощью URL вместо пути будет работать:

case water: cell.src = "https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300";

Какая операционная система является сервером бег - проверяете ли вы местное?

источник

2016-01-30 17:31:19 kernelmaster

местные испытания, win10 – lip3k

нормально, работает при загрузке в ftp, спасибо :) – lip3k

Браузер не отображает изображения, созданные Javascript

ответ

Смежные вопросы