javascript - 通过 Express 获取和传递图像时出现问题

Question

我正在设置一个本地 Nodejs 服务器，它可以通过 Express 后端将我本地的图片传递到我的前端。

我设法让图片显示出来，但我发现解决方案有点令人困惑，我不确定这是否是最佳方法。

app.use(express.static(__dirname + "/pics"));

app.get('/pic1', function(req,res){
    res.sendFile(__dirname + "/pics/test.jpg");
});

这是一个非常直接的端点，可以将图片发送到前端。

fetch("/pic1",{
})
    .then((response)=>{
        console.log(response);
    });

所以我想使用 fetch 访问图片来显示它，但从 fetch 得到的响应只提供了网址，没有可供使用的图像。

img.src = "/pic1";

如果我完全跳过使用 fetch 并将 img 指定为端点 url，我会得到实际的图像。

所以我的问题是我不完全理解为什么第二个解决方案有效以及为什么我无法通过获取获取图像。这是将图像传递到前端的最佳方式吗？我想走快速路线，这样如果我得到本地没有的图片，最终我可以调整端点，有没有办法可以阻止用户通过手动输入网址来获取图像？ 。所以也许我只是不明白 Express 端点是如何工作的或 fetch 是如何工作的，但这就是我所处的位置。

Answer 1

直接设置图像的 url 而不是使用 fetch 来拉取它是完全有效的。然后，浏览器将请求/pic1 处的资源作为相关图像(您将在开发人员工具的网络请求选项卡中看到这一点)

如果您想使用 fetch 来提取图像数据，您可以尝试以下代码:

        console.log("Fetching image..");
        fetch("/pic1")
         .then(response => response.blob())
         .then(image => {
            let element = document.getElementById("testImg");
            element.setAttribute("src", URL.createObjectURL(image));
        });

假设您有一个像这样的 img 元素:

<img id="testImg" />