在html，css和js网站库中显示本地文件中的图像

Question

在我的大学课程/模块中，它涵盖了中间的HTML和CSS，以及基本的Java脚本（我们还没有到达那里）：我需要使用HTML，CSS和可选的Java脚本作为奖励标记来创建一个网站。

我被困在画廊中，我想制作一个响应式图像网格（我可以从https://www.w3schools.com/howto/howto_hows_css_image_grid_sensitive.asp学习/获取）； 但是我想在本地文件夹中填充100张图片，而我的网站上却带有html / css / js代码，不需要我手动对文件夹中的每张图片进行硬编码。 事后看来，我想从所述文件夹中添加和删除图像，并使网站的画廊适应添加/删除的图像。

从理论上讲，我假设我需要将文件夹的内容读入列表/数组，然后以某种方式解析它们并输出内容。

我发现了两个涉及此想法的资源：-https: //www.html5rocks.com/zh-CN/tutorials/file/dndfiles/-https : //github.com/blueimp/JavaScript-Load-Image#meta-data -解析

我已经搜索了几个小时，我认为这样的代码应该存在于某个地方，以为我认为我对html，css，js等的缺乏了解以及通用术语阻碍了我的搜索，因此任何建议都将是极大的帮助赞赏。

预先感谢您的时间和精力。

Answer 1

考虑从存在源映像文件的相应目录中使用Shell脚本 。

您只需使用以下代码制作一个.cmd文件并执行该文件，它就会动态生成一个html文件，您可以在其中显示所需的图像。

scriptToExecute.cmd

echo ^<!doctype html^>^<head^>^</head^>^<body^> >> index.html
for %%j in (*.JFIF, *.png, *.JPG, *.GIF) do echo ^<img src=^"./%%j^" style="width:176px;height:300px" ^>  >> index.html
echo ^</body^>^</html^> >> index.html

index.html

<!doctype html><head></head><body> 
<img src="./2.jfif" style="width:176px;height:300px" >  
<img src="./3.jfif" style="width:176px;height:300px" >  
<img src="./4.jfif" style="width:176px;height:300px" >  
<img src="./1.png" style="width:176px;height:300px" >  
</body></html>

您可以更改shell脚本以在不同元素（例如轮播等）中显示图像。

Answer 2

如果要动态地从文件夹中加载图像（而不是手动输入图像），则不可避免地需要JavaScript。 将jQuery添加到组合中将使其变得更加容易而不困难。 即使您只是开始学习javascript，也不要害怕使用jQuery。

为了能够使用jQuery，您需要做的就是添加以下内容：

<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>

从本质上讲，这样做是添加$变量，您将在以下代码中看到该变量提供了直接进行ajax调用并将新img元素添加到body元素的方法。

要为文件夹中的每个图像创建一个元素（假设它仅包含图像），应如下所示：

<script type="text/javascript">
    var folder = "images"; //TODO: change this to the path to your folder with the images.
    $.ajax({
        url: folder,
        success: function(data) {
            $(data).find("a").attr("href", function(i, val) {
                $("body").append("<img src='" + folder + '/' + val + "'>");
            });
        }
    });
</script>

另外，如果您只是想避免必须手动输入所有img元素并手动填写每个src属性，则可以编写一些使它自动化的JavaScript。 使用以下脚本，您将能够单击'Choose Files'并选择文件夹中的所有图像，单击'Open'，然后单击'Go'，它将为所有img元素生成html并显示它。 然后，您可以复制该html并将其手动粘贴到您的真实项目中。

<input id="file" type="file" multiple />
<button onClick="go()">Go</button>
<div id="output"></div>

<script type="text/javascript">
  function go() {
  const fileInput = document.getElementById('file');
  const outputDiv = document.getElementById('output');
  let html = '';
  for (const file of fileInput.files) {
    html += '<img src="images/' + file.name + '" />';
  }
  outputDiv.textContent = html;
}
</script>

https://codepen.io/rockysims/pen/MPEMOG

在html，css和js网站库中显示本地文件中的图像

问题描述

2 个解决方案

解决方案1
2 2019-04-11 13:43:52

解决方案2
1 已采纳 2018-10-15 06:38:41

在html，css和js网站库中显示本地文件中的图像

问题描述

2 个解决方案

解决方案1 2 2019-04-11 13:43:52

解决方案2 1 已采纳 2018-10-15 06:38:41

解决方案1
2 2019-04-11 13:43:52

解决方案2
1 已采纳 2018-10-15 06:38:41