javascript - 如何使用 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>

脚本.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() ;
});

路由.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