如何在网页上显示数组中的图像和文本？

Question

基本上，我有一个带有两个文本字段的简单网页，以及一个用于从计算机中选择图像的按钮。 我需要做的是让用户选择一张照片，填写“艺术家”和“文本”字段，然后按“添加图像”按钮。 然后这应该将所有三个项目添加到一个数组中，并在 div 中显示图像，在“li”列表项中显示文本。

目前，图像有效，按下按钮时将显示在屏幕上，文本似乎被推入数组，但无论我做什么，我都无法让文本显示在网页上. 如果我将数组转换为对象，我也无法显示图像，这就是为什么我将文本的推送拆分为单独的函数。

无论哪种方式，无论我尝试什么，要么破坏图像显示，要么破坏文本显示。 我无法让两者都显示在页面上。 我试图做到这一点，每当添加新的图像和文本时，它都会像这样一个接一个地显示：

[专辑封面]

[文本]

[专辑封面]

[文本]

随着您不断添加更多内容，这将在屏幕上继续进行。 有人可以告诉我我哪里出错了。 谢谢。

 var info = { myImages: [], addImage: function(imageBlob) { this.myImages.push(imageBlob); }, addInfo: function(artist, title) { this.myImages.push({ artist: artist, title: title }); }, redrawImages: function() { var divForImages = document.getElementById('myImages'); divForImages.innerHTML = ''; this.myImages.forEach((imageBlob) => { var img = document.createElement('img'); img.style.width = "200px"; img.style.height = "200px"; img.src = URL.createObjectURL(imageBlob); divForImages.appendChild(img); }); }, redrawInfo: function() { var ul = document.querySelector('ul'); this.myImages.forEach(function (item) { let li = document.createElement('li'); ul.appendChild(li); li.innerHTML += item; }); } } var handlers = { addImageAndRedraw: function() { var fileInput = document.getElementById('fileInput'); var artistField = document.getElementById('artistField'); var titleField = document.getElementById('titleField'); if (fileInput.files.length === 1) { info.addImage(fileInput.files[0]); info.addInfo(artistField.value, titleField.value); info.redrawImages(); info.redrawInfo(); } } } var button = document.getElementById('button'); button.addEventListener('click', handlers.addImageAndRedraw);

 <!DOCTYPE html> <html> <head> </head> <body> <h1>My images</h1> <input id="fileInput" type="file" accept="image/*" multiple="false" value="Select image"> <input id="button" type="button" value="Add image and redraw"> <div> <input id="artistField" type="text" placeholder="artist"> <input id="titleField" type="text" placeholder="title"> </div> <hr> <div id="myImages"> </div> <ul></ul> <script src="album.js"></script> </body> </html>

Answer 1

您将信息添加到与图像相同的数组中，因此它最终会像 [图像，信息，图像，信息] 等。您最好添加一个包含图像和信息的对象，并且然后在向页面添加内容时将其视为单个对象，而不是在单独的函数中添加图像和文本。 此外，您没有清除信息列表，因此它会呈指数增长。

这是一个修改后的例子，在调整我上面提到的位之后......

 var info = { myInfo: [], add: function(imageBlob, artist, title) { this.myInfo.push({ image: imageBlob, artist: artist, title: title }); }, redraw: function() { var divForImages = document.getElementById('myImages'); divForImages.innerHTML = ''; var ul = document.querySelector('ul'); ul.innerHTML = ""; this.myInfo.forEach((info) => { var img = document.createElement('img'); img.style.width = "200px"; img.style.height = "200px"; img.src = URL.createObjectURL(info.image); divForImages.appendChild(img); let li = document.createElement('li'); ul.appendChild(li); li.innerHTML = info.artist + " - " + info.title; }); }, } var handlers = { addImageAndRedraw: function() { var fileInput = document.getElementById('fileInput'); var artistField = document.getElementById('artistField'); var titleField = document.getElementById('titleField'); if (fileInput.files.length === 1) { info.add(fileInput.files[0], artistField.value, titleField.value); info.redraw(); } } } var button = document.getElementById('button'); button.addEventListener('click', handlers.addImageAndRedraw);

 <h1>My images</h1> <input id="fileInput" type="file" accept="image/*" multiple="false" value="Select image"> <input id="button" type="button" value="Add image and redraw"> <div> <input id="artistField" type="text" placeholder="artist"> <input id="titleField" type="text" placeholder="title"> </div> <hr> <div id="myImages"></div> <ul></ul>

如何在网页上显示数组中的图像和文本？

问题描述

1 个解决方案

解决方案1
1 已采纳 2019-11-25 14:34:23

如何在网页上显示数组中的图像和文本？

问题描述

1 个解决方案

解决方案1 1 已采纳 2019-11-25 14:34:23

解决方案1
1 已采纳 2019-11-25 14:34:23