我试图将来自存储平台(本例中是firebase)的图像插入到html表中。我正在使用一个数据库,它链接到每个图像(见文章末尾的快照),到目前为止,我已经成功地从表中的数据库插入了一个文本,一个图像,但不是其他的,如在屏幕截图中可以看到的:
正如你所看到的,文本显示,而图像有小图标代替。代码如下所示。它在我的浏览器中工作得很好,但由于某些原因,它在SE平台中不显示。谁能帮我弄清楚我做错了什么?我怎样才能让图像出现在那张桌子上?
<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.1.2/firebase.js"></script>
<script>
var config = {
apiKey: "AIzaSyCg9wsEL5tAYdSyz9IapqvvMGWpFNAlc74",
authDomain: "checkup-7b62e.firebaseapp.com",
databaseURL: "https://checkup-7b62e.firebaseio.com",
projectId: "checkup-7b62e",
storageBucket: "checkup-7b62e.appspot.com",
messagingSenderId: "324802643995"
};
firebase.initializeApp(config);
</script>
<script>
// '.tbl-content' consumed little space for vertical scrollbar, scrollbar width depend on browser/os/platfrom. Here calculate the scollbar width .
$(window).on("load resize ", function() {
var scrollWidth = $('.tbl-content').width() - $('.tbl-content table').width();
$('.tbl-header').css({'padding-right':scrollWidth});
}).resize();
</script>
<head>
<title>Evenimente locale</title>
</head>
<table style="width:100%" id="ex-table">
<tr id="tr">
<th>Image</th>
<th>Categoria</th>
</table>
<script>
var anunturi = firebase.database();
var storage = firebase.storage();
anunturi.ref("-Events").orderByKey().limitToLast(5).once('value', function(snapshot){
if(snapshot.exists()){
var content = '';
snapshot.forEach(function(data){
var val = data.val();
var link = val.imageUrl;
var storageRef = storage.refFromURL(link).getDownloadURL().then(function(url) {
var test = url;
document.querySelector('img').src = test;
}).catch(function(error) {});
alert(val.imageUrl);
content +='<tr>';
content += '<td>' + '<img src={val.imageUrl} border={0} height={150} width={150}></img>' + '</td>';
content += '<td>' + val.categoria + '</td>';
});
$('#ex-table').append(content);
//var tbody = $('table tbody');
// tbody.html($('tr',tbody).get().reverse());
}
});
</script>
</body>
</html>
数据库如下所示:
