HTML + JS로 데이터베이스의 이미지를 표시하는 방법은 무엇입니까?

Question

개 보호소를 만들고있어 이미지 URL을 모두 데이터베이스에 저장했습니다. 지금까지, 이것은 내가 무엇을 가지고 : 내가 원하는 것은 내가 강아지의 사진을 보여주고 싶은이 P를 보여주는 대신이다

.

내 코드 :

index.html을

 <div id="template_especie_show"> 
      <nav class="navbar navbar-fixed-top df-nav cen col-md-12" role="navigation" style=""> 
       <ul class="nav navbar-nav" style="width: 100%"> 
        <li class="pull-left"><button type="button" id="especie_menu_left" class="btn btn-default btn-menu">Voltar</button></li> 
        <li class="pull-left"><button type="button" id="especie_menu_logout" class="btn btn-default btn-menu-logout">Sair</button></li> 
        <li style="float: none; display: inline-block; position: relative; text-align: center"><a href="#index"><img src="img/icone_ap.png" height="47"></a></li> 
       </ul> 
      </nav> 
      <div class="row vert-offset-top-30"></div> 
      <div class="col-md-2"></div> 
      <div class="col-md-8"> 

       <div style="text-align: center"><h2><span id="animal_show_name"></span></h2></div> 
       <div class="input-group"> 
        <div class="input-group-addon"> 
         <span class="glyphicon glyphicon-search" aria-hidden="true"></span> 
        </div> 
        <input type="text" id="table_especie_search" class="form-control" placeholder="Procurar animais"> 
       </div> 
       <table class="table table-hover" id="table_especie"> 
        <thead> 
        <tr> 
         <th></th> 
         <th></th> 
        </tr> 
        </thead> 
        <tbody> 
        </tbody> 
       </table> 
      </div> 
      <div class="col-md-2"></div> 
     </div> 

script.js

var tableEspecie= $('#table_especie').DataTable({ 
    "paging": false, 
    "info":  false, 
    "order": [ 
     [2, "asc" ], 
     [3, "asc"], 
     [1, "asc"] 
    ], 
    "columnDefs": [ 
     { "visible": false, "targets": 0 }, 
     { "visible": false, "targets": 2 }, 
     { "visible": false, "targets": 3 } 
    ], 

    "drawCallback": function() { 
     var api = this.api(); 
     var rows = api.rows({page:'current'}).nodes(); 
     var last=null; 

     api.column(2, {page:'current'}).data().each(function (especie, i) { 
      if (last !== especie) { 
       $(rows).eq(i).before(
        '<tr class="especie info"><td colspan="4">'+especie+'</td></tr>' 
       ); 

       last = especie; 
      } 
     }); 

     $("#table_especie thead").remove(); 
     $("#table_especie tfoot").remove(); 
    } 
}); 

var populateEspecieShowName = function(data) { 
    $('#animal_especie_name').text(data[0].name); 
}; 


var populateEspecieTable = function(data) { 
    var animais = []; 

    $.each(data, function(id_animal, animal){ 
     animais.push([ 
      animal.id_animal, 
      animal.nome_animal + ': ' + '<br>' + animal.notas_animal, 
      animal.nome_animal.charAt(0).toUpperCase() 
     ]); 
    }); 

    $('#table_especie').dataTable().fnClearTable(); 
    $('#table_especie').dataTable().fnAddData(animais); 
    $('#table_especie').dataTable().fnDraw(); 
}; 

$('#table_especie tbody').on('click', 'tr', function() { 
    var animalId = $('#table_especie').DataTable().row(this).data(); 

    if (animalId !== undefined) 
     $.route('animal/' + animalId[0]); 
}); 

$('#table_especie_search').keyup(function(){ 
    $('#table_especie').DataTable().search($(this).val(), false, true).draw() ; 
}); 

주의에 대한 route.js

case 'especie_show': 
       setButton('left', template, 'especies', 'redirect', null); 
       setButton('right', template, 'especie/' + pathArray[1] + '/edit', 'redirect', null); 


       var params = 'filter=id_especie%3D' + pathArray[1] + '&fields=nome_especie'; 
       $.api.getRecords('especie', params, getToken('token'), populateEspecieShowName); 

       params = 'filter=especie_id_especie%3D' + pathArray[1] + '&fields=nome_animal, notas_animal'; 
       $.api.getRecords('animal', params, getToken('token'), populateEspecieTable); 

       break; 

모두에게 감사하고 도와주세요!

Answer 1

데이터가 어떻게 구성되어 있는지 알 수는 없지만 쉼터에있는 개마다 URL이 필요합니다.

[{"name":"fido", 
"img":"some url"}, 
{"name":"woofer", 
"img":"some 2nd url"}, 
{"name":"champ", 
"img":"some 3rd url" 
}] 

당신은 당신의 js에 그 정보를 가져올 것입니다. 그런 다음 각 항목을 반복하고 이에 따라 이미지 태그 소스 속성을 설정합니다.

 for(var i = 0; i < arrayOfDogs.length; i++){ 
     (your img node).src = arrayOfDogs[i].url;   
      } 

jQuery가 사용중인 것 같습니다. 그래서 템플릿을 만들 수 있고 데이터를 반복 할 때 테이블/div에 새로운 행/셀/헤더/뭐든 추가 할 수 있습니다.

Answer 2

데이터베이스에 이미지 URL 만있는 대신 예를 들어 전체 HTML 참조 : 너희들, 내가 같은 문제가있는 사람이 같이 그것을 해결할 수 있기를 바랍니다 도움을

<img src="http://i.imgur.com/OrK7thb.jpg" alt="Heidi" style="width:304px;height:228px;"> 

감사합니다.