Изображение не загружается должным образом

Добрый день! Я пытаюсь установить источник фонового изображения div с помощью javascript, и он, похоже, не работает. Я получаю странную ошибку в консоли, из которой я понятия не имею, что делать.Изображение не загружается должным образом

Код может показаться немного длинным, но я постараюсь сделать это как можно более ясно:

Стиль в основном содержит 3-х классов. 1 из них - большая коробка, в которой хранятся изображение и текст. Остальные только для изображения (с размером) и метки (опять же с размером). Тело содержит простой пустой элемент div, который будет динамически полем.

Что осталось это файл JavaScript: массив, объект, из которого будет считываться «Новости» 's различных свойства (такие как название, вид, источник изображения)

и, наконец, единственной функция, которая в основном создает новые элементы div, дает им классы и добавляет их к основному. Ошибка здесь.

Весь исходный код:

<!DOCTYPE html> 

<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta charset="utf-8" /> 
    <title></title> 
    <style> 
.newsBox { 
     width:600px; 
     height:100px; 
     background-color:#B3CFDB; 
     float:left; 
     border-bottom: solid 1px; 
     border-bottom-color: #B9DDED; 
    } 

    .newsPic { 
     width:96px; 
     height:96px; 
     float:left; 
     margin-left: 4px; 
     margin-top:2px; 
     } 
    .newsLabel { 
     height:75px; 
     width: 500px; 
     background-color: white; 
     margin-top:20px; 
     float:left; 
     } 
    </style> 
</head> 
<body> 
    <div id="main" class="content"></div> 
</body> 
</html> 
<script> 
    //create the object array and dummies 
    var arr = []; 
    var news = { 
     title: "", 
     views: 0, 
     srs: "" 
    }; 

    var one = Object.create(news); 
    one.title = "Bender"; 
    one.views = 132; 
    srs = "Bender.gif"; 
    arr.push(one); 

    var two = Object.create(news); 
    two.title = "Salvation is upon us"; 
    two.views = 777; 
    srs = "fryFuturama.jpg"; 
    arr.push(two); 

    var three = Object.create(news); 
    three.title = "This website is a joke"; 
    three.views = 0; 
    srs = "fry.jpg"; 
    arr.push(three); 
    //Set up 
    var main = document.getElementById("main"); 

    function loadNews() { 

     for (var i = 0; i < arr.length; i++) { 
      var p = document.createElement("DIV"); 
      p.className = "newsBox"; 
      main.appendChild(p); 

      var p1 = document.createElement("DIV"); 
      p1.className = "newsPic"; 
      p1.style.backgroundImage = "url(" + arr[i].srs + ")"; 
      p.appendChild(p1); 

      var p2 = document.createElement("DIV"); 
      p2.className = "newsLabel"; 
      p2.innerHTML = arr[i].title + "</br></br>" + "Views: " + arr[i].views; 
      p.appendChild(p2); 
     } 
    } 


    loadNews(); 
</script>

EDIT: Ошибка: Resource interpreted as Image but transferred with MIME type text/html: "file:///C:/Users/SameTime/Desktop/ObjectSetBackgroundImage.html"

источник

2013-06-27 Bloodcount

Короткий ответ на большой стене кода изменить ваш

srs = "Bender.gif";

one.srs = "Bender.gif";

источник

2013-06-27 11:07:38 bugwheels94

О боже ... это одна из тех ошибок. Спасибо, сэр, он решил проблему! – Bloodcount

Добро пожаловать. – bugwheels94

Изображение не загружается должным образом

ответ

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