将图像文件添加到JSON对象并以HTML显示吗？
[英]Adding image files into JSON object and displaying it in HTML?
问题描述
我是编码的初学者，我在这里报名只是为了问这个问题。 我想知道是否有人可以指出正确的方向或帮助我解决此代码。 首先，我的目标是创建一个艺术作品集，以3x3格式显示我的作品，该格式基本上与Instagram相同。
因此，在过去的几周中，我与导师一起做了很多修补工作，首先，他告诉我仅使用JavaScript以3x3格式显示图像。 之后，我被告知要学习有关JSON的更多信息，以及如何像以前一样将图像存储在JSON对象中并在3x3对象中显示。 最初，JavaScript效果很好，但后来他告诉我使用JSON对其进行更改后，我的图像不再显示相同的图像。 现在它们垂直堆叠在一起，不再是3x3。 我一直在将代码与旧文件进行比较，而最新的文件仍然垂直堆叠...
我当前的JS代码：
var data = {
"images": [{
"img": "img/balloon.jpg",
"id": "balloon"
},
{
"img": "img/cate.jpg",
"id": "cate"
},
{
"img": "img/dragon.jpg",
"id": "dragon"
},
{
"img": "img/Groot.jpg",
"id": "groot"
},
{
"img": "img/flareon.jpg",
"id": "flareon"
},
{
"img": "img/forest.jpg",
"id": "forest"
},
{
"img": "img/fox.jpg",
"id": "fox"
},
{
"img": "img/glaceon.jpg",
"id": "glaceon"
},
{
"img": "img/majora.jpg",
"id": "majora"
},
] };
<!DOCTYPE html> <html> <head> <title> Art Gallery</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous"> <link rel="stylesheet" type="text/css" href="main.css"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> </head> <header> <center> <div class="banner"> <div class="centered-text"> My Art Gallery</div> </div> </center> </header> <body> <script> var fs = require('./img'); var files = fs.readdirSync('./img'); function myMessage() { if (files == null) { return " sorry something went wrong "; } else { // print files } } </script> <script> document.write(myMessage()); </script> <p> <div class="tn-container tn left"> <div id="profile-picture"> <script> var myProfile = document.createElement("img"); myProfile.setAttribute("src", "img/Me1.jpg"); document.getElementById("profile-picture").prepend(myProfile); </script> </div> <p> <div class="block_1 hline-bottom "></div> </p> </div> </p> <div class="container"> <div class="row"> <div class="col-md-4 col-sm-6 col-xs-12"> <div class="art" id="images"></div> </div> <div class=" col-md-4 col-sm-6 col-xs-12"> <div class="art" id="images"></div> </div> <div class=" col-md-4 col-sm-6 col-xs-12"> <div class="art" id="images"></div> </div> <div class="col-md-4 col-sm-6 col-xs-12"> <div class="art" id="images"></div> </div> <div class="col-md-4 col-sm-6 col-xs-12"> <div class="art" id="images"></div> </div> <div class="col-md-4 col-sm-6 col-xs-12"> <div class="art" id="images"></div> </div> <div class="col-md-4 col-sm-6 col-xs-12"> <div class="art" id="images"></div> </div> <div class="col-md-4 col-sm-6 col-xs-12"> <div class="art" id="images"></div> </div> <div class="col-md-4 col-sm-6 col-xs-12"> <div class="art" id="images"></div> </div> </div> </div> </html> <script type="text/javascript " src="script.js "></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> </body>
data.images.forEach(function(obj) {
var img = new Image();
img.src = obj.img;
img.setAttribute("class", "art");
document.getElementById("images").appendChild(img);
如您所见，我一直在使用容器和行将其格式设置为3x3。 直到我开始将图像插入JSON对象之前，一切都很好。 图像显示不错，但现在它们是垂直堆叠的。 我只想要3x3，就像以前一样：/
这是我第一次在此处发布关于Stack Overflow的文章，因此如果我的问题不清楚或者我的代码没有正确显示，我会向您道歉。 我也可以张贴旧文件进行比较
2 个解决方案
解决方案1
1 2018-08-08 05:08:47
首先， fs和require是Node.js模块，这意味着它们存在于服务器上，而不是在客户端（即HTML网页）上未定义。 试图将该代码包含在HTML <script>标记中将不起作用。 对于您的情况，我建议删除顶部的两个<script>块，因为它们什么也不会做，只能在页面顶部写“对不起，出现了问题”。
至于图像“堆叠”的问题，那是因为您试图写入具有相同id值的多个HTML元素。 id对于页面上的每个元素都必须是唯一的。 如果您尝试分配多个具有相同id ，那么通常只有具有该id的第一个元素才能工作，因为document.getElementById将在第一个匹配项之后停止搜索。 即使这种行为也不一定得到保证。 切勿给多个元素相同的id 。
为了解决该问题，您可以更改要使图像完全匹配JSON数据的id属性的<div>元素的id值，并将document.getElementById("images")更改为document.getElementById(obj.id) 。
请注意，这不是一个很好的解决方案，因为它通过要求数据文件准确知道页面上的id值来将数据与网页的布局联系起来。 我建议您查找并学习如何使用document.getElementsByName()或document.getElementsByClassName() 。
解决方案2
0 2018-08-08 09:39:53
注意：我不太擅长JavaScript，所以这个答案可能不是最好的答案，但它确实可以实现预期的效果。
//here's your JSON var data = [{ "img": "https://s3.amazonaws.com/uifaces/faces/twitter/abinav_t/128.jpg", "id": "balloon" }, { "img": "https://s3.amazonaws.com/uifaces/faces/twitter/ritu/128.jpg", "id": "cate" }, { "img": "https://s3.amazonaws.com/uifaces/faces/twitter/zeldman/128.jpg", "id": "dragon" }, { "img": "https://s3.amazonaws.com/uifaces/faces/twitter/calebogden/128.jpg", "id": "groot" }, { "img": "https://s3.amazonaws.com/uifaces/faces/twitter/abinav_t/128.jpg", "id": "flareon" }, { "img": "https://s3.amazonaws.com/uifaces/faces/twitter/ritu/128.jpg", "id": "forest" }, { "img": "https://s3.amazonaws.com/uifaces/faces/twitter/zeldman/128.jpg", "id": "fox" }, { "img": "https://s3.amazonaws.com/uifaces/faces/twitter/calebogden/128.jpg", "id": "glaceon" }, { "img": "https://s3.amazonaws.com/uifaces/faces/twitter/abinav_t/128.jpg", "id": "majora" }, ]; //variable to keep a track of the image no. var i=0; //looping through each "col-sm-4" to add the images data.forEach(function(item) { document.getElementsByClassName("col-sm-4")[i].innerHTML="<img src='"+item.img+"'/>"; i++; });
.col-sm-4 { border: 3px solid white; padding: 0; } img { width: 100%; }
<div class="container"> <div class="row"> <div class="col-sm-4"> </div> <div class="col-sm-4"> </div> <div class="col-sm-4"> </div> </div> <div class="row"> <div class="col-sm-4"> </div> <div class="col-sm-4"> </div> <div class="col-sm-4"> </div> </div> <div class="row"> <div class="col-sm-4"> </div> <div class="col-sm-4"> </div> <div class="col-sm-4"> </div> </div> </div>
这是CodePen： https ：//codepen.io/devnathjoydeep/pen/JBmmaq
在JSON对象的html页面上的列表视图中显示图像和描述
[英]Displaying Images and Description in listview on html page from JSON object
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.