이미지가 렌더링되지 않습니다 - JavaScript, Ajax

HTML, 자바 스크립트 및 AJAX를 사용하여 목록에서 이미지를 렌더링하려고합니다. 다음이미지가 렌더링되지 않습니다 - JavaScript, Ajax

내가 내 모든 데이터를 설정 한 모델 VAR에서

$(function(){ 
    var model = { 
     init: function() { 
      imageArray = []; 
      imageArray[0] = { 
       id: 0, 
       image01 : new Image(), 
       src : "c0.jpg", 
       imageCaption : "cat0", 
       count: 0 
      }; 
      imageArray[1] = { 
       id: 1, 
       image01 : new Image(), 
       src : "c1.jpg", 
       imageCaption : "cat1", 
       count: 0 
      }; 
      imageArray[2] = { 
       id: 2, 
       image01 : new Image(), 
       src : "c2.jpeg", 
       imageCaption : "cat2", 
       count: 0 
      }; 
      imageArray[3] = { 
       id: 3, 
       image01 : new Image(), 
       src : "c3.jpeg", 
       imageCaption : "cat3", 
       count: 0 
      }; 
      imageArray[4] = { 
       id: 4, 
       image01 : new Image(), 
       src : "c4.jpg", 
       imageCaption : "cat4", 
       count: 0 
    }; 
     }, 
     returnImages: function() { 
      return imageArray.src 
     } 
    }; 


    var octopus = { 
     openAll: function() { 
      return model.returnImages(); 
     }, 
     init: function() { 
      model.init(); 
      view1.init(); 
     } 
    }; 
    var view1 = { 
     init: function() { 
      this.catList = $('#elems'); 
      view1.render(); 
     }, 
     render: function(){ 
      var htmlStr = ''; 
      octopus.openAll().forEach(function(image){ 
       htmlStr += "<li><img class="imge" src='" + image + "' width=\"160\" height=\"120\"/></li></hr><br/>"; 
      }); 
      this.catList.html(htmlStr); 
     } 
    }; 


    octopus.init(); 
});

을 다음과 같이 내가 3 바르라는 이름의 뷰 1 모델과 문어를 가지고, 내 자바 스크립트 코드에서 내 HTML 코드

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>cat Clicker</title> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
    <script src="cc.js"></script> 
</head> 
<body> 
<div class="container"> 
<div class="row-fluid"> 
    <div class="col-sm-3"> 
     <ul id="elems" class = "elems"></ul> 
    </div> 
    <div class="col-sm-9"> 
    Hi 
    </div> 

</body> 
</html>

입니다 모든 이미지를 반환하는 함수. view1 var에서 이미지 목록을 표시하는 렌더링 함수를 설정하고 var 문어에서 모델과 뷰를 연결하려고합니다. 그러나 이미지가 내 페이지에서 렌더링되지 않습니다. 내가 여기서 잘못 가고있는 곳을 이해하도록 도와주세요. 사전에

덕분에 당신은 잘못된거야 것은 imgArray는 Array 및 나던 점이다

출처

2017-09-11 Arjun Viswanathan

는 속성이 src 배열의 각 요소는 src 그래서 난 의심 속성을 가지고

returnImages: function() { 
    return imageArray.src 
}

src 속성의 배열을 가져 오려고했습니다. 그러나

returnImages: function() { 
    return imageArray.map(function(e){ 
     return e.src; 
    }); 
}

에 변경이 전체 이야기가 아니다 - 당신의 model.init 방법은 배열을 생성하지만 그것으로 아무것도하지 않을 - 그 방법이 끝나는대로 즉시 폐기됩니다. 다음

returnImages: function() { 
    return imageArray 
}

와 ..

var model = { 
     init: function() { 
      imageArray = []; 
      //.. snip .. // 
      model.imageArray= imageArray; 
     } 
}

을 그리고 당신은 당신은 배열을 반환해야 returnImages

returnImages: function() { 
    return model.imageArray.map(function(e){ 
     return e.src; 
    }); 
}

출처

2017-09-11 08:38:59 Jamiec

을 업데이트해야합니다 : 당신은 아마 모델에 어딘가에을 저장할 각 이미지의 src 속성에 바인딩합니다.

render: function(){ 
     var htmlStr = ''; 
     octopus.openAll().forEach(function(image){ 
      htmlStr += "<li><img class='imge' src='" + image.src + "' width=\"160\" height=\"120\"/></li></hr><br/>"; 
     }); 
     this.catList.html(htmlStr); 
    }

Here to see it working in jsfiddle

출처

2017-09-11 08:41:58 CodeHacker

귀하의 권장 사항에 대해 감사드립니다. 처음에는 배열을 반환하고 각 이미지를 표시하는 동안 src를 바인드했습니다. 그러나 그것은 저를 위해 작동하지 않았습니다. 그러나 returnImages를 다음과 같이 업데이트하려고 시도했습니다. returnImages : function() { return model.imageArray.map (function (e) { return e.src; }); } 이것은 나를 위해 일했습니다. –

Jamiec은 또한 모델에 배열을 저장하지 않는다는 문제를 발견했습니다. 그래서 그의 대답은 당신을 도와 줄 것입니다. 그가 sugests 또는 return model.imageArray로 매핑 할 수 있습니다. – CodeHacker

그냥 두 제안은 나를 위해 작동 깨달았다! 감사! –

이미지가 렌더링되지 않습니다 - JavaScript, Ajax

답변

관련 문제