Javascript 通过express获取和传递图像时出现问题

我正在设置一个本地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得到的响应只给了我url，没有图片可以使用

img.src = "/pic1";

如果我完全跳过使用fetch并将端点url分配给img，我将得到实际的图像

---

所以我的问题是我不太明白为什么第二种解决方案有效，为什么我不能通过fetch获得图像。这是将图像传递到我的前端的最佳方式吗？我想沿着快速路线走，这样最终如果我得到本地没有的图片，我就可以调整端点，有没有办法通过手动键入url阻止用户访问图像？。因此，也许我只是不了解express端点是如何工作的，或者fetch是如何工作的，但这正是我所处的位置。

直接设置图像的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" />

---

当您将图像的url分配给图像src时，浏览器将自动获取它。几乎没有任何理由手动获取图像。你能解释一下你为什么要这么做吗？我实际上只是认为这是一种方法，特别是如果我想决定如何显示它的话。获取图像会给你原始的二进制数据，然后你必须将其转换为blob，然后你必须将其转换为datauri，以便在任何地方显示它。