为什么未显示图片？

Question

我正在尝试从node.js获取图像（jpg文件）并将其显示在html标签（img）中，但未显示图片（如您所见：）。

我处理请求的node.js看起来：

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended : true}));

app.get('/pictureItem', function (req, res) {

    // imagesNames[0].name - contains the name of the image to send (jpg file)
    res.sendFile('/images/' + imagesNames[0].name, {root: __dirname })  
})

我的js代码如下：

$.get("/pictureItem", function(data, status) 
                 {
                     console.log("got image");
                     $("#imageId").attr("src", data);                    
                 })     

我想念什么？

Answer 1

您在Express中的'/pictureItem'路线发送图像。

您在客户端代码中进行的ajax调用似乎希望返回一个URL，而不是图像：

$.get("/pictureItem", function(data, status) {
     console.log("got image");
     $("#imageId").attr("src", data);                    
});

执行此操作的通常方法是：

1. 将$("#imageId").attr("src", data);设置为服务器知道如何为其提供图像的URL。
2. 这将导致浏览器随后从您的服务器请求该URL。
3. 服务器收到该图像请求后，它将把图像发回。
4. 浏览器将显示从服务器返回的图像。

---

我不确定您要在此处解决的总体问题是什么（您没有显示操作的整体逻辑），但是您可以这样做：

$("#imageId").attr("src", "/pictureItem");

然后，当浏览器从/pictureItem路由请求图像时，现有的服务器路由将返回所需的图像。

Answer 2

您是否为静态文件定义了中间件？如果是，则可以定义GET方法，该方法检索到特定图像的路径并返回该路径，以便将其附加到src属性。

您的pictureItem端点将返回图像文件本身。而您的src属性需要一个字符串，以便它可以获取图像本身。

server.js

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended : true}));
app.use('/images', express.static(__dirname + '/Images'));
app.get('/pictureItem', function (req, res) {
    // returns a string as '/images/someimagename.jpg'.
    res.send('/images/'+imageNames[0].name);
});

someJavascript.js

$.get("/pictureItem", function(data, status) 
{
    console.log("Found image on url: " + data);
    $("#imageId").attr("src", data);                    
});