将图像文件添加到JSON对象并以HTML显示吗?

时间:2018-08-08 04:14:33

标签: javascript html css json

我是编码的初学者,我在这里报名只是为了问这个问题。我想知道是否有人可以指出正确的方向或帮助我解决此代码。首先,我的目标是创建一个艺术作品集,以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 个答案:

答案 0 :(得分:1)

首先,fsrequireNode.js模块,这意味着它们存在于服务器上,而不是在客户端(即HTML网页)上未定义。试图将该代码包含在HTML <script>标签中将无法正常工作。对于您的情况,我建议删除顶部的两个<script>块,因为它们什么也不会做,只能在页面顶部写上“对不起问题”。

对于图像“堆叠”的问题,这是因为您试图写入具有相同id值的多个HTML元素。 id对于页面上的每个元素必须唯一。如果您尝试为多个事物分配相同的id,则通常只有具有该ID的第一个元素才有效,因为document.getElementById将在第一个匹配项后停止搜索。即使这种行为也不一定得到保证。永远不要给多个元素相同的id

要解决此问题,您可以更改id元素的<div>值,以使图像与JSON数据的id属性完全匹配,并更改{{1 }}到document.getElementById("images")

请注意,这不是一个很好的解决方案,因为它通过要求数据文件确切知道页面上的document.getElementById(obj.id)值来将数据与网页的布局联系起来。建议您查找并学习如何使用iddocument.getElementsByName()

答案 1 :(得分:0)

注意::我对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