通过快递获取和传递图像的问题答案

【问题标题】：Problem with fetch and passing image through express通过快递获取和传递图像的问题
【发布时间】：2019-08-21 14:35:10
【问题描述】：

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

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

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 并分配 img 端点 url，我会得到实际的图像。

所以我的问题是我不完全理解为什么第二种解决方案有效，以及为什么我无法通过 fetch 获取图像。这甚至是将图像传递到我的前端的最佳方式吗？我想沿着快速路线走，这样如果我得到本地没有的图片，最终我可以调整端点，有没有办法通过手动输入 url 来阻止用户访问图像？ .因此，也许我只是不了解 express 端点的工作方式或 fetch 的工作方式，但这就是我所在的地方。

【问题讨论】：

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

标签： javascript node.js rest express fetch

【解决方案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" />

【讨论】：