我的服务器(或用户代理?)如何查找静态文件?

How does my server (or user agent?) look up static files?

我只是想知道,在文件系统上检索属于某个 json 对象的已保存图像究竟是如何工作的?例如,当我创建一个有图像的产品并将图像与新创建的产品一起上传时,我通常将图像保存在服务器后端的文件系统上的某个文件夹中,然后保存返回的图像保存路径和将其作为字符串字段存储在我的产品 json 对象中。

它现在在客户端如何工作,例如,如果我想检索相同的图像并将其显示在产品卡上的图像 src 属性中,然后在浏览器中显示它,它必须查找服务器的静态资产文件夹(我存储图像的位置)上的图像源,对吗?

我将图像 url 作为字符串保存到我的产品(即 json 数据)。该图像字符串路径必须与我的静态文件夹的路径名称相匹配才能真正获得真实图像。但这确实有效吗?我的意思是图像是字节数据,必须由服务器检索,首先,它必须知道在哪里寻找资产,然后解析并将它们发送回浏览器,或者不(或者实际上是客户端以某种方式在幕后检索它)?当我说:

时,客户端如何执行此操作或我的服务器上发生了什么
app.use("/uploads", express.static(path.join(__dirname, '/uploads'))) 

如果我的前端不是直接从我的 node.js 应用程序提供服务,图像检索是否真的有效,假设我的后端驻留在一个单独的云服务器上,而我的前端位于其他云服务器上,如何然后它会检索到真实图像吗?

当客户端将图像上传到服务器时,它必须以服务器能够在未来某个时间通过一些已知的 URL 将该图像返回给客户端的方式进行。如果服务器只是将图像放入服务器上的文件夹中,并且服务器正在为该文件夹中存在的所有静态资源提供服务,那么服务器只需要知道如何重建 URL 即可找到它并从该文件夹提供它,以便它可以将 URL 嵌入到它生成的 HTML 页面中。这只是您同意的一些约定。您在问题中显示的一行代码看起来您​​的约定是 /uploads/somefilename 作为 URL.

请注意,如果所有客户端上传都在完全相同的目录中,那么您必须确保没有两个上传具有相同的文件名,或者如果您在上传时服务器,然后客户端需要这样的机制来了解或获取该文件名或 URL 应该是什么,以便它可以在将来请求它。

假设客户正在上传个人资料图片,您希望稍后能够在网页中显示该图片。步骤如下:

  1. 使用表单 post,客户上传个人资料图片。
  2. 服务器接收图像,以任何必要的方式对其进行处理(例如将其调整为个人资料图像的理想图像大小)并存储在 uploads 文件夹中。该文件唯一命名为 username-profile.jpg,其中用户名是客户端在您的登录系统中的唯一用户名。这保证文件名是唯一的并且可以为特定用户制造。
  3. 以后生成网页时,服务器希望嵌入头像。他们使用登录用户的用户名构造一个 URL 并将其放在生成的网页中的 <img> 标记中,例如:<img src="/uploads/someusername-profile.jpg">.
  4. 浏览器获取该网页,看到 <img> 标记并向服务器发送请求 https://yourhost/uploads/someusername-profile.jpg
  5. 您的服务器看到 /uploads 前缀并让 express.static 在该目录中找到 someusername-profile.jpg,找到后,将图像流式传输回浏览器。
  6. 浏览器显示它得到的图像。

How does that now work exactly on client side, e.g if I want to retrieve that same image and display it in the image src attribute on the product card and I display it in the browser, it has to look up for the image source on the server's static assets folder (where I stored the image), right?

我认为这在上面的步骤中有所描述。

I saved the image url as a string to my product (which is json data). That image string path has to match the path name to my static folder to actually get the true image. But does that work exactly? I mean that image is byte data and has to be retrieved by the server, and first of all, it has to know where to look for the assets and then parsed and sent them back to the browser, or not (or is the client actually retrieving it somehow behind the scenes)?

您的服务器将生成 HTML 并在其中包含一个 URL 的适当 <img> 标记,当 URL 被请求时,您的服务器将发送所需的图像由浏览器。因此,您在服务器上的 HTML 中嵌入 <img> 标记,并将 HTML 作为浏览器某些页面请求的一部分发送到客户端。然后浏览器解析 HTML,找到 <img> 标签,从该标签中获取 src 值,并向服务器发送另一个请求以获得该图像 URL。服务器收到该请求,您的 express.static() 中间件代码行将将该请求与您服务器上的特定文件匹配,并将图像数据发送回浏览器。当浏览器收到图像数据时,它会在您的网页中显示图像。

如果客户端试图通过 Javascript 调用直接检索图像,则客户端必须通过某种方式知道 URL 向服务器请求什么,以便服务器响应具有所需的图像。

what happens on my server when I say: app.use("/uploads", express.static(path.join(__dirname, '/uploads'))).

该行代码告诉 Express 获取任何以 /uploads 路径开头的 URL 并在服务器端 /uploads 目录中查找具有相同文件名的文件名正如在请求的其余部分中指定的那样 URL。因此,如果请求的 URL 是 https://yourhost/uploads/myfile.jpg,那么由于您声明 express.static() 中间件的方式,它将在您的 /uploads 文件夹中查找 myfile.jpg 文件。如果找到,它将接管 http 请求并将图像数据流式传输回客户端。如果找不到,路由将继续到其他路由,如果在任何其他路由中找不到匹配项,express 将 return 404 http 状态。

And does the image retrieving actually work if my frontend is served not from my node.js app directly, and lets say my backend resides on a separate cloud server and my frontend on some other cloud server, how does it retrieve the real images then?

谁在生成 HTML,其中嵌入了一个 <img> 标签,该标签应该包含一个 src 属性和一个对应于实际图像的 URL必须知道该图像的正确 URL 是什么。如果生成 HTML 的服务器与提供图像的主机不同,则它必须生成指向适当主机的 URL。如果是同一个主机,那么它可以完全省略 URL 中的域,浏览器将替换为包含 <img> 标记的网页中的域。但是,如果它是不同的主机,那么你将不得不把整个 URL 包括协议和主机放在:

<img src="https://mycloudhost/uploads/someimage.jpg">