Question

我一直试图通过服务器中的URL提取多个图像，然后尝试在浏览器中显示它们。当我单击运行按钮时，我知道服务器已通过控制台日志（显示了两个缓冲区项目）获取了图像，但是浏览器中没有任何显示。

我了解我可以直接从浏览器中获取，但是最终我必须从数据库中保存的URL中获取，因此理想情况下，我可以从服务器中获取并在浏览器中显示图像。

下面是代码。

任何帮助或见解将不胜感激！

浏览器：

console.log('running')
	var outside
document.getElementById('getLogos').addEventListener('click',getLogos);
	
function getLogos(){
fetch('http://localhost:8080/logos'
)
// .then((res) => res.blob())
.then((data) => {
	let imagesInfo = JSON.parse(data);
	let pics = "";
	for (i=0;i<imagesInfo.length;i++){
		// document.write("<li><img src='" + images[i] + "' width='160' height='120'/><span>" + images[i] + "</span></li>");
		pics += `
		<li><img src='" + images[i] + "' width='160' height='120'/><span>" + images[i] + "</span></li>
		`
 		}
	// outside = URL.createObjectURL(images)
 
document.getElementById('output').innerHTML = pics;
		console.log(images)
		console.log(imagesInfo)
})
}

<!DOCTYPE html>
<html>

<body>
  <h1>Logos</h1>
  <ul id="logos">
    <button id="getLogos">Get Logos</button>
  </ul>
  <div id="output"></div>
</body>

</html>

服务器-节点

    console.log('server is starting');

const express = require('express');
const morgan = require('morgan');
const app = express();
//const mysql = require('mysql');

const request = require('request');

app.use(express.static('./public'));

app.listen(8080, () => {
  console.log("Listening on 8080")
})

app.use(morgan('short'));


app.get("/logos", (req, res, next) => {

  var options = [
    {
    url: "https://www.google.com/images/srpr/logo11w.png", ///url will be sourced from a database
    method: 'GET',
    headers: {'Content-Type': 'image/png'},
    encoding: null
  },
    {
      url: "https://logos-download.com/wp-content/uploads/2016/02/Walmart_logo_transparent_png.png",
      method: 'GET',
      headers: {'Content-Type': 'image/png'},
      encoding: null
    }
  ]

  var result = [];
  options.forEach(function (option) {
      request(option, function (err, body) {
          if (err) {
              console.log(err)
              return;
          } else
          // console.log(body.body)
              result.push(body.body);
              console.log(result)
              resultString = JSON.stringify(result)
              res.write (resultString);
              res.end        
      })

  })

})

Before stringify - sent as buffer in node

After stringify - sent as string in node

Answer 1

首先，请一个getInvoice(){ var self = this axios .get(url) .then(response => { self.invoice = response.data.data; console.log(self.invoice.invoice_nr); }) },请愿书

GET

在其中，将所有选项分组到数组中，

app.get("/logos", (req, res, next) => {

}

然后，执行foreach处理所有选项，并将结果保存到数组中，例如：

var options = [
    {
        url: "https://www.google.com/images/srpr/logo11w.png", ///url will be sournced from a database
        method: 'GET',
        headers: { 'Content-Type': 'image/png' },
        encoding: null
    },
    {
        url: "https://logos-download.com/wp-content/uploads/2016/02/Walmart_logo_transparent_png.png",
        method: 'GET',
        headers: { 'Content-Type': 'image/png' },
        encoding: null
    }
];

然后，返回一个包含所有徽标的数组

var result = [];
options.forEach(function (option) {
    request(option, function (err, body) {
        if (err) {
            console.log(err)
            return;
        } else
            result.push(body.body);
    })
})

现在您将拥有字符串化格式的JSON。

要再次转换为对象，请使用

result = JSON.stringify(result); res.write(result)

例如，您可以阅读数组映射。（我使用Object.keys将其转换为数组，因为当前是一个对象）

var myjsonagain = JSON.parse(resultstringifyed)

Answer 2

您可以在客户端执行此操作的一种方法是从服务器获取图像并将其转换为数据图像，然后以这种方式将其附加到您的元素中。因此，客户端无需服务器交互即可获取和合并内容。

请注意，您需要确保Content Security Policy允许浏览器处理数据图像。

这可以做到：

<meta http-equiv="Content-Security-Policy" 
      content="default-src 'self' 'unsafe-inline' 'unsafe-eval'; img-src 'self' data:;"
\>

Answer 3

您需要确保src的代码是有效的文本URL字符串。当您将缓冲区放入其中时，浏览器无法解释它。除非确实需要，否则请避免使用缓冲区。正如乔迪在回答中所说。接收URL（在对象或数组中），然后JSON.stringify并将其发送到浏览器。然后将其转换回对象或数组。然后可以将其放入图片的src中

//incoming stringified json "[{url: 'some url', name: 'cat picture'}]"
document.getElementById('getLogos').addEventListener('click',getLogos);

function getLogos(){
fetch('http://localhost:8080/logos') //This should return a stringified array or object
.then((data) => {
    let imageInfo = JSON.parse(data);
    let text = "";
    for (i=0;i<images.length;i++){
        text += `<li><img src='" + images[i].url + "' width='160' height='120'/><span>" + images[i].name + "</span></li>`
        } //src needs to be a string that is a valid url, i bet if you use the inspector this would be a long buffer string that the browser could not parse

    document.getElementById('output').innerHTML = pics;
        console.log(images)
  })
}

对于浏览器中的大多数内容，请尝试使用JSON或字符串。除非您来回发送复杂的数据，否则通常不需要缓冲区。而且浏览器通常可以很好地处理图片。

如何在节点中获取多张图片并在浏览器中显示

3 个答案: