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

Question

I am a total beginner at coding, and I signed up here just to ask this question. 我是编码的初学者，我在这里报名只是为了问这个问题。 I'm wondering if any of you can point me to the right direction or help me out with this code. 我想知道是否有人可以指出正确的方向或帮助我解决此代码。 First off, my goal is to create an art portfolio that shows my art in a 3x3 format, basically the same format look as Instagram. 首先，我的目标是创建一个艺术作品集，以3x3格式显示我的作品，该格式基本上与Instagram相同。

So I've done a lot of tinkering the past couple of weeks, working with a mentor and at first, he told me to display my images in a 3x3 format using just JavaScript. 因此，在过去的几周中，我与导师一起做了很多修补工作，首先，他告诉我仅使用JavaScript以3x3格式显示图像。 After doing that, I've been told to learn more about JSON and how to store images in a JSON object and display it in a 3x3 object exactly like before. 之后，我被告知要学习有关JSON的更多信息，以及如何像以前一样将图像存储在JSON对象中并在3x3对象中显示。 At first, it turned out great with JavaScript but then after he told me to change it up by using JSON, my images don't display the same anymore. 最初，JavaScript效果很好，但后来他告诉我使用JSON对其进行更改后，我的图像不再显示相同的图像。 Now they are stacked on top of each other, vertically, and not 3x3 anymore. 现在它们垂直堆叠在一起，不再是3x3。 I've been comparing code with my old file and the latest one still turns out vertically stacked... 我一直在将代码与旧文件进行比较，而最新的文件仍然垂直堆叠...

My current JS code: 我当前的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);

As you can see, I've been using containers and rows to make my format 3x3. 如您所见，我一直在使用容器和行将其格式设置为3x3。 It was fine before until I started inserting the images into JSON object. 直到我开始将图像插入JSON对象之前，一切都很好。 Images are showing which is great but now they are vertically stacked. 图像显示不错，但现在它们是垂直堆叠的。 I just want it 3x3 like before :/ 我只想要3x3，就像以前一样：/

This is my first time posting here on Stack Overflow so I apologize in advance if my question isn't clear or if I'm not showing my code correctly. 这是我第一次在此处发布关于Stack Overflow的文章，因此如果我的问题不清楚或者我的代码没有正确显示，我会向您道歉。 Also I can post up my old files to compare 我也可以张贴旧文件进行比较

Answer 1

First of all, fs and require are Node.js modules, meaning they exist on the server, and are not defined on the client (ie the HTML web pages). 首先， fs和require是Node.js模块，这意味着它们存在于服务器上，而不是在客户端（即HTML网页）上未定义。 Trying to include that code in an HTML <script> tag will not work. 试图将该代码包含在HTML <script>标记中将不起作用。 In your case, I suggest removing the top two <script> blocks, as they will do nothing but write "sorry something went wrong" at the top of your page. 对于您的情况，我建议删除顶部的两个<script>块，因为它们什么也不会做，只能在页面顶部写“对不起，出现了问题”。

As for your problem of images being "stacked together", that is because you are trying to write to multiple HTML elements with the same id value. 至于图像“堆叠”的问题，那是因为您试图写入具有相同id值的多个HTML元素。 id must be unique for every element on a page. id对于页面上的每个元素都必须是唯一的。 If you try to assign multiple things the same id , then usually only the first element with that id will work, because document.getElementById will stop searching after the first match. 如果您尝试分配多个具有相同id ，那么通常只有具有该id的第一个元素才能工作，因为document.getElementById将在第一个匹配项之后停止搜索。 Even that behavior is not necessarily guaranteed. 即使这种行为也不一定得到保证。 Never give multiple elements the same id . 切勿给多个元素相同的id 。

To solve the problem, you can change the id value of the <div> elements where you want the images to go to exactly match the id attribute of your JSON data, and change your document.getElementById("images") to document.getElementById(obj.id) . 为了解决该问题，您可以更改要使图像完全匹配JSON数据的id属性的<div>元素的id值，并将document.getElementById("images")更改为document.getElementById(obj.id) 。

Note that this is not a very good solution, because it ties your data to the layout of the webpage by requiring the data file to know exactly what the id values on your page are. 请注意，这不是一个很好的解决方案，因为它通过要求数据文件准确知道页面上的id值来将数据与网页的布局联系起来。 I suggest you look up and learn how to use document.getElementsByName() or document.getElementsByClassName() . 我建议您查找并学习如何使用document.getElementsByName()或document.getElementsByClassName() 。

Answer 2

NOTE: I'm not very good at JavaScript, so this answer might not be the best one out there, but it does what it's supposed to. 注意：我不太擅长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>

And here's the CodePen: https://codepen.io/devnathjoydeep/pen/JBmmaq 这是CodePen： https ：//codepen.io/devnathjoydeep/pen/JBmmaq

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

问题描述

2 个解决方案

解决方案1
1 2018-08-08 05:08:47

解决方案2
0 2018-08-08 09:39:53

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

问题描述

2 个解决方案

解决方案1 1 2018-08-08 05:08:47

解决方案2 0 2018-08-08 09:39:53

解决方案1
1 2018-08-08 05:08:47

解决方案2
0 2018-08-08 09:39:53