如何在HTML模板中嵌入QR Code PNG图片？生成图片浏览器不显示求助

问题情况 #

我用以下代码生成QR码图片：

url="https://www.google.com"
img = qrcode.make(url)
img.save("displayQrInvite.png")
return render_template('invite.html')

对应的HTML模板代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My App</title>
</head>
<body>
    <h1>Scan below qr code image</h1>
    <img src="/displayQrInvite.png"/>
</body>
</html>

但生成的QR码在Chrome、Edge等浏览器里都加载不出来，显示状态如下：

问题原因及解决办法 #

1. 静态资源路径不对（最常见原因） #

如果用的是Flask这类框架，默认只会从static目录读取静态文件。你把图片存在项目根目录，浏览器请求/displayQrInvite.png时，服务器根本找不到这个文件。

修复步骤：

• 先在项目根目录建个static文件夹（没有的话）
• 修改Python代码，把图片保存到static目录：

  url="https://www.google.com"
  img = qrcode.make(url)
  img.save("static/displayQrInvite.png")
  return render_template('invite.html')
  

• 改HTML里的图片路径，推荐用框架自带的方法生成路径，或者直接写正确的静态路径：

  <!-- 用Flask的url_for更规范 -->
  <img src="{{ url_for('static', filename='displayQrInvite.png') }}"/>
  <!-- 或者直接写绝对路径 -->
  <img src="/static/displayQrInvite.png"/>
  

2. 文件权限不足 #

图片保存后，如果服务器进程没有读取权限，也会导致加载失败。

修复步骤：

• 检查图片文件的权限，确保服务器能读
• Linux/macOS下可以用命令改权限：

  chmod 644 static/displayQrInvite.png
  

3. 浏览器缓存搞鬼 #

有时候浏览器缓存了之前的失败请求，就算你修复了路径，还是显示加载失败。

修复步骤：

• 按Ctrl+F5强制刷新页面，或者清掉浏览器缓存再重新打开页面

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