使用Express结合npm qrcode API生成二维码不显示问题求助

我来帮你排查一下问题，看了你的代码后，发现几个关键的小错误导致二维码无法正常显示：

1. 响应头设置错误 #

你这里的res.setHeader('200', { 'Content-type': 'application/json' });完全写错了：

• setHeader的第一个参数是HTTP头字段名，不是状态码；状态码应该用res.status(200)来单独设置
• 你返回的是HTML页面，所以Content-Type应该设为text/html，而不是application/json

2. img标签的属性使用错误 #

generateQR（假设你用的是qrcode库的toDataURL方法）返回的是Data URI格式的字符串（比如data:image/png;base64,...），需要作为img标签的src属性值，而不是直接放在标签里。你现在的写法<img ${qrImage} />会变成类似<img data:image/png;base64,... />，这不符合HTML语法，浏览器无法识别。

3. 多余的单引号导致二维码内容异常 #

你把req.body.address用单引号包裹成'${req.body.address}'，会让二维码的内容带上额外的单引号，这大概率不是你想要的效果，直接使用原始的地址字符串即可。

修正后的完整代码 #

app.post('/ausgabe', async (req, res) => { 
  try { 
    // 正确设置状态码和响应头
    res.status(200).setHeader('Content-Type', 'text/html');
    // 直接使用原始地址，去掉多余单引号
    const eingabe = req.body.address; 
    const qrImage = await generateQR(eingabe); 
    console.log(qrImage); 
    // 正确将qrImage作为img的src属性值
    const body = `<!DOCTYPE html> 
<html lang="de"> 
<head> 
  <meta charset="UTF-8"> 
  <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  <title>QR-Code</title> 
</head> 
<body> 
  <img src="${qrImage}" alt="QR-Code der eingegebenen Adresse" /> 
</body> 
</html>`; 
    res.send(body); 
  } catch (err) { 
    // 错误状态码用500更合适（服务器内部错误），404是资源未找到
    res.status(500).json({ status: 'Fail', message: err.message }); 
  } 
});

另外补充一点：如果你的generateQR不是调用qrcode.toDataURL，而是其他方法（比如返回图片Buffer），那你需要把Buffer转换成Data URI或者直接返回图片流，但从你console.log能看到内容且格式正确来看，应该是返回了Data URI，上面的修正应该能解决问题。

内容的提问来源于stack exchange，提问作者TobiG