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

Question

In my university course/module that covers intermediate HTML and CSS, and basic java-script (thought we haven't gotten there yet): I need to create a website using HTML, CSS and optionally java-script as bonus marks. 在我的大学课程/模块中，它涵盖了中间的HTML和CSS，以及基本的Java脚本（我们还没有到达那里）：我需要使用HTML，CSS和可选的Java脚本作为奖励标记来创建一个网站。

I am stuck at the gallery, I want to make a responsive image grid (that I can learn/get from https://www.w3schools.com/howto/howto_css_image_grid_responsive.asp ); 我被困在画廊中，我想制作一个响应式图像网格（我可以从https://www.w3schools.com/howto/howto_hows_css_image_grid_sensitive.asp学习/获取）； However I want to have a local folder filled with say 100 images and my website with html/css/js code that doesn't require me to manually hard code each individual image from the folder. 但是我想在本地文件夹中填充100张图片，而我的网站上却带有html / css / js代码，不需要我手动对文件夹中的每张图片进行硬编码。 In hindsight I want to add and remove images from said folder and have the website's gallery adapting to the added/removed images. 事后看来，我想从所述文件夹中添加和删除图像，并使网站的画廊适应添加/删除的图像。

Theoretically I assume that I'll need to read in the folder's contents, into a list/array, then somehow parse them and output the content. 从理论上讲，我假设我需要将文件夹的内容读入列表/数组，然后以某种方式解析它们并输出内容。

I have found two sources that touches on the idea: - https://www.html5rocks.com/en/tutorials/file/dndfiles/ - https://github.com/blueimp/JavaScript-Load-Image#meta-data-parsing 我发现了两个涉及此想法的资源：-https: //www.html5rocks.com/zh-CN/tutorials/file/dndfiles/-https : //github.com/blueimp/JavaScript-Load-Image#meta-data -解析

I have searched for a few hours and I would think that such a code should exist somewhere, thought I believe my lack of knowledge regarding html, css, js, etc and general terminology is hindering me in my search, thus any advice would be greatly appreciated. 我已经搜索了几个小时，我认为这样的代码应该存在于某个地方，以为我认为我对html，css，js等的缺乏了解以及通用术语阻碍了我的搜索，因此任何建议都将是极大的帮助赞赏。

Thank you in advance for your time and effort. 预先感谢您的时间和精力。

Answer 1

Consider using a shell script from the corresponding directory where source image files are present. 考虑从存在源映像文件的相应目录中使用Shell脚本 。

You can simply make a .cmd file with the following code and execute that, it would dynamically generate an html file where you can display images as you wish. 您只需使用以下代码制作一个.cmd文件并执行该文件，它就会动态生成一个html文件，您可以在其中显示所需的图像。

scriptToExecute.cmd 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 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>

You can make changes to the shell script to display the images in different elements such as a carousel, etc. 您可以更改shell脚本以在不同元素（例如轮播等）中显示图像。

Answer 2

If you want to load images from a folder dynamically (not entering each manually) you can't avoid needing javascript. 如果要动态地从文件夹中加载图像（而不是手动输入图像），则不可避免地需要JavaScript。 Adding jQuery into the mix makes it easier not harder. 将jQuery添加到组合中将使其变得更加容易而不困难。 Don't be afraid of using jQuery even if you're only just starting to learn javascript. 即使您只是开始学习javascript，也不要害怕使用jQuery。

To be able to use jQuery, all you need to do is add this: 为了能够使用jQuery，您需要做的就是添加以下内容：

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

Essentially what that does is add the $ variable which you'll see in the following code provides a straightforward way to make an ajax call and also to add new img elements to the body element. 从本质上讲，这样做是添加$变量，您将在以下代码中看到该变量提供了直接进行ajax调用并将新img元素添加到body元素的方法。

To create an element for each image in the folder (assuming it contains only images) should be as simple as the following: 要为文件夹中的每个图像创建一个元素（假设它仅包含图像），应如下所示：

<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>

Alternately, if you just want to avoid having to type out all the img elements by hand and fill in each src attribute by hand, you can write a bit of javascript that automates that. 另外，如果您只是想避免必须手动输入所有img元素并手动填写每个src属性，则可以编写一些使它自动化的JavaScript。 Using the following script you'll be able to click 'Choose Files' and select all the images in the folder, click 'Open', and then click 'Go' and it will generate the html for all the img elements and display it. 使用以下脚本，您将能够单击'Choose Files'并选择文件夹中的所有图像，单击'Open'，然后单击'Go'，它将为所有img元素生成html并显示它。 You can then copy that html and manually paste it into your real project. 然后，您可以复制该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 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