为什么图片不显示？答案

【问题标题】：Why the image is not shown?为什么图片不显示？
【发布时间】：2018-11-10 04:45:01
【问题描述】：

我正在尝试从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);                    
                 })

我错过了什么？

【问题讨论】：

返回的data 的值是多少？看起来您正在返回文件本身的字节数据
您根据要求发送的文件是什么？它是.html 文件吗？你能指定你的前端js代码在哪里吗
如果 Taplar 推测您正在发送图像的字节数据，那么您做错了！显示图像所需要做的就是使用新的图像元数据更新 dom，浏览器将自行获取并渲染图像。即使您确实想要字节数据，比如绘制到 html5 画布中，看起来您的客户端“获取”请求实际上并不是在请求文件。没有迹象表明它填充了“imageNames”参数。反过来，看起来 imageNames 参数应该在正文中，这不是 GET 请求的标准过程！

标签： javascript jquery html node.js

【解决方案1】：

您在 Express 中的 '/pictureItem' 路由发送了一张图片。

您的客户端代码中的 ajax 调用似乎希望得到一个 URL，而不是图像：

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

通常的做法是：

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

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

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

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

【讨论】：

如果我有多个图像，并且我想通过一个请求（一个从服务器获取请求）为所有图像提供服务，我如何使用一个字符串设置“数据”并在服务器中解析它为了发送正确的图像？
@user3668129 - 您通常不会通过一个请求提供多个图像，除非您在玩精灵（隐藏在一个主图像中的子图像）。浏览器请求图像，服务器将其发送到图像上。如果浏览器需要多个图像，它会分别请求它们。抱歉，但我仍然不明白您要在这里解决什么真正的整体问题。请编辑您的问题以返回几个步骤，并在此处描述您真正想要完成的任务。

【解决方案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);
});

一些Javascript.js

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

【讨论】：