使用JSON将保存到本地文件夹的所有图像显示到单个div？答案

【问题标题】：Displaying all images saved to a folder locally to individual div using JSON?使用JSON将保存到本地文件夹的所有图像显示到单个div？
【发布时间】：2022-02-02 23:49:08
【问题描述】：

只是想问这个（请注意，我是编程新手，只在空闲时间练习）

我有 10 张图片本地保存到我的项目文件夹中的一个文件夹（名为“designImages”）
如何使用 JSON（如果需要，还可以使用 javscript）将文件夹中的所有图像显示到 HTML 中的单个 div？

我尝试修复此问题，但无济于事。 div 只是在前端显示一个文本字符串。

JSON 格式和 JS 这是我的代码（试图显示 1 只是为了测试）：

let images = {
  id: "1",
  name: "Design 1",
  imageUrl: "/design-images/1.png",
};

let output = document.getElementById("myImage");
output.innerHTML = images.imageUrl;

HTML

<body>
<div id="myImage">
</body>

这是我的练习网站：当您向下滚动到 See My Works! 部分时，您可以查看问题。 https://vladesplana.web.app/

【问题讨论】：

URL 本身不会创建图像，您需要创建一个<img> 元素并将URL 分配给它的href 属性。

标签： javascript html json

【解决方案1】：

试试这个，

const images =[        // you have to create 10 objs instead of two

{
  id: "1",
  name: "Design 1",
  imageUrl: "/design-images/1.png",
},{
  id: "2",
  name: "Design 2",
  imageUrl: "/design-images/2.png",
};
]

const imagesOnSingleDiv=images.map(img=> `<img src=${img.imageUrl} alt=${img.name}>`).join("\n")
let output = document.getElementById("myImage");
output.innerHTML=imagesOnSingleDiv

imagesOnSingleDiv 包含output 的内容

【讨论】：

非常感谢@aravind ks，但您能详细说明一下这部分吗？ const imagesOnSingleDiv=images.map(img=> <img src=${img.imageUrl} alt=${img.name}>).join("\n")
当然。基本上，我们创建了一个对象数组，每个 obj 都包含有关图像的数据。 map 是一个返回新数组的数组方法。参数img 保存图像数组中的当前对象。在这里，我们返回了一个``imgtags which holds your images . Also, they are comma-separated. by using the join("\n") we can join all the array elements by a newline character and it will return a string which we can use for the innerHTML```的数组。希望它有意义:)
哦，我现在明白了。但为了澄清，map 方法中的 img 参数是否可以调用任何东西？例如像 image 但仍然返回相同的标签？
yup ，您可以将参数img 重命名为任何名称，仍然得到相同的结果

【解决方案2】：

下午好，首先，你应该关闭你的<div> 标签:)

然后，您应该在 HTML 中添加一个 <img> 标记。您可以使用 HTML 来执行此操作，但随后您将无法自动添加插入文件夹中的新图像。

我建议在 javascript 中执行以下操作：

let myDiv = document.getElementById("myImage");
let img = document.createElement("img");
img.src = images.imageUrl;
myDiv.appendChild(img);

第一行将你的 div 放入一个变量中；第二行创建一个新的图像元素；第三行将图像的源代码放入其中，最后一行将图像元素作为 div 的子元素添加到 html 中。

我希望这足以帮助您修复代码。

一切顺利，本杰明

【讨论】：