Javascript 如何使用Node.js文件系统在浏览器中设置img标记的src？

我正在创建一个可以在浏览器中查看的html文件，页面上有一个播放图像的幻灯片。我希望通过子文件夹中的所有图片播放图片的迭代

最理想的情况是，我应该能够在不接触代码或硬编码文件名的情况下从images文件夹中添加/删除图片。我试图使用node.js和

require（'fs'）

从文件夹返回可用文件的列表，但我对node完全陌生，不知道如何从浏览器调用节点文件。目前我拥有的是：

website.html

app.js

const fs = require('fs');

const files = fs.readdir('./images', function(err, files) {
    if (err) console.log('Error: ', err);
    else console.log(files);
})

在浏览器中运行此操作会引发错误

未定义require

我已经在命令提示符下对文件夹运行了

npm install-g browserify

---

如何实现节点文件，使浏览器能够访问“图像”文件夹中的文件？

要列出文件夹中所有文件的名称，请尝试：

fs.readdir('path-to-your-folder', (error, files) => {
    if (error) {
        console.error(error);
        return;
    }
    files.forEach(file => {
        console.log(file);
    }) 
})

如果您已经知道如何设置后端服务器，下面是使用Node、Express和Pug进行的设置 节点：server.js

const express = require('express');
const app = express();
app.set('view engine', 'pug');

app.use(express.static(__dirname + '/public'));

const imagesFolder = './public/images/splash';
const fs = require('fs');

var filesArr = [];

fs.readdir(imagesFolder, (err, files) => {
  files.forEach(file => {
    filesArr.push(file);
  });
});

app.get('/', (req, res) => {
  console.log(filesArr);
  res.render('splash', {
    filesArr : JSON.stringify(filesArr)
  });
});

var slideIndex = 0;
showSlides();

function showSlides(){

    var slideshow = document.getElementById('theShow');             
    slideshow.style.backgroundImage = "url('../images/splash/" + files[slideIndex] + "')";

    document.body.removeChild(slideshow);
    document.body.appendChild(slideshow);

    if (slideIndex < files.length) {
        slideIndex++;
    } else {
        slideIndex = 0;
    }
    setTimeout(showSlides, 6000);
}

哈巴狗：飞溅。哈巴狗

doctype html
html
  body(style='overflow:hidden')
    div#theShow(style="height:100%; width:100%; background-repeat:no-repeat; background-position:center;")
    script.
      const files = JSON.parse('!{filesArr}');
    script(src='javascript/splashScreen.js')

JavaScript:splashScreen.js

const express = require('express');
const app = express();
app.set('view engine', 'pug');

app.use(express.static(__dirname + '/public'));

const imagesFolder = './public/images/splash';
const fs = require('fs');

var filesArr = [];

fs.readdir(imagesFolder, (err, files) => {
  files.forEach(file => {
    filesArr.push(file);
  });
});

app.get('/', (req, res) => {
  console.log(filesArr);
  res.render('splash', {
    filesArr : JSON.stringify(filesArr)
  });
});

var slideIndex = 0;
showSlides();

function showSlides(){

    var slideshow = document.getElementById('theShow');             
    slideshow.style.backgroundImage = "url('../images/splash/" + files[slideIndex] + "')";

    document.body.removeChild(slideshow);
    document.body.appendChild(slideshow);

    if (slideIndex < files.length) {
        slideIndex++;
    } else {
        slideIndex = 0;
    }
    setTimeout(showSlides, 6000);
}

var slideIndex=0；
放映幻灯片（）；
函数showSlides（）{
var slideshow=document.getElementById（'theShow'）；
slideshow.style.backgroundImage=“url（'../images/splash/“+文件[slideIndex]+”）”；
document.body.removeChild（幻灯片）；
document.body.appendChild（幻灯片）；
if（slideIndex

对于节点，

readdir（）

函数用于读取目录，并且

filesArr

变量被赋予

\

根目录的

get请求上的Pug文件

然后，帕格可以使用
访问
filesArr
变量！{}
。变量
files
在其自己的
脚本中设置为等于
filesArr
。
然后调用外部脚本并访问
文件

对于我来说，更改
div
的
backgroundImage
比更改
img的
src
效果更好。但是splashScreen.js中的javascript可以很容易地重写为
slideshow.src=“url（'../images/splash/“+files[slideIndex]+”）”其中幻灯片放映是
img
元素，而不是
div


如果，像我一样，你在理解如何为你的网站设置后端服务器之前就尝试这样做
互联网上有很多关于使用Node的资源，但有时很难找到。对于一个绝对的初学者来说，更难找到关于如何开始的资源

这本书内容丰富，没有太多赘述，展示了如何从无到有。（超链接时间戳从9:20开始，这是实际编程开始的时间，但视频的第一部分也是信息性的）

在那段视频之后，同一个YouTuber有一个视频，你可以观看它，了解如何设置后端服务器，然后你可以利用这个答案顶部的代码
 节点在服务器上运行。“浏览器在别处运行。”戴夫·牛顿明白；有没有办法实现我所寻找的？上面的帖子可能会帮助解决你的问题doubt@IshanJoshi我不确定那篇文章对我的处境有什么帮助。我需要一种从文件夹中读取并找出该文件夹中所有文件的名称的方法。从浏览器调用此方法会导致
fs未定义
fs
是后端模块。您不能在浏览器中使用它。你必须制作一个服务器端应用程序，将这些文件提供给你的前端。从某种意义上说，我必须将服务器上的图像“推”到网站上，而不是将服务器上的图像从网站上“拉”出来？是的，你需要将图像从服务器推到网站ExpressJS是一种非常简单的方法。