如何在 https 客户端中的服务器上显示图像？答案

【问题标题】：How do I display image on server in https client?如何在 https 客户端中的服务器上显示图像？
【发布时间】：2021-03-07 00:29:59
【问题描述】：

服务器（Express）在端口 4000 上工作，它在 /public/image.png 有一个图像
完成设置快速静态文件服务
客户端 (Next.js) 在端口 3000 上工作

当我在本地测试时，

<image src="http://localhost:4000/image.png" />我看得很清楚。直接访问http://localhost:4000/image.png地址会弹出图片下载弹窗。

但在生产服务器中，

<image src="https://example.com/image.png" />我看不到图片。直接访问https://example.com/image.png 在客户端显示Not Found消息。

使用代理和nginx + letsencrypt 环境的生产服务器。

有什么帮助吗？

【问题讨论】：

您可以使用 nginx 本身提供所有静态内容，这会比使用 Express 性能更高。

标签： node.js express nginx server next.js

【解决方案1】：

如果您确实希望它们显示为公共，则需要将图像文件存储在资源文件夹中。

【讨论】：

我必须将图像保存在服务器上...该图像将在多个站点上显示。
将该图像放入资源/图像文件夹并尝试使用该链接访问它。或者您也可以尝试像访问 js/css 文件一样访问它。它应该工作

【解决方案2】：

我猜你使用 nginx 反向代理将你的请求重定向到你的应用程序，端口为 3000。

但图像位于在 4000 上运行的不同应用程序上

您的 nginx 配置可能类似于：

server {
    server_name example.com
    listen 80;
    location / {
        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

您可以做的是添加一个新位置，例如 images，它重定向到您的端口 4000 应用程序

server {
    server_name example.com
    listen 80;
    location / {
        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
    location /images {
        proxy_pass http://localhost:4000;
        proxy_http_version 1.1;
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

每个http://example.com/images 请求都将被直接重定向到您的 4000 端口应用程序现在您的图片将在http://example.com/images/image.png 下提供

【讨论】：

@Juntae wuhuu :)