使用Endroid QrCode生成二维码成功但页面无法正常显示问题求助

核心原因定位 #

你遇到的现象是本地存储二维码正常、接口返回头部正确但前端显示异常，90%以上的场景是二维码二进制流被额外的输出内容污染，或者接口权限校验拦截了图片请求。

分步排查方案 #

• 步骤1：终止接口多余输出
  你的控制器在输出二维码内容后，CodeIgniter框架可能还会执行后续的钩子、debug输出等逻辑，额外追加的字符会破坏PNG图片的二进制结构。修改generateQRcode方法，输出后立刻终止程序：

  public function generateQRcode($bill_no = 123456) {
      // 清空之前所有缓冲区的输出内容，排除BOM头、前置空格、父类输出等污染
      ob_end_clean();
      $qr = new QrCode("HEy there");
      header('Content-Type: '.$qr->getContentType());
      echo $qr->writeString();
      // 立刻终止程序，避免框架后续输出额外内容
      exit;
  }
  

• 步骤2：排查接口权限校验拦截
  你的控制器继承了Admin_Controller，构造方法中执行了登录校验逻辑$this->not_logged_in()。<img>标签发起的请求如果未携带登录态Cookie（跨域、跨站场景下会默认禁止第三方Cookie），会被校验逻辑拦截，返回登录页的HTML内容而非图片流，就会出现黑底白块的异常显示。
  解决方案二选一：
  1. 将generateQRcode方法排除在登录校验规则外，无需登录即可访问
  2. 改用Base64直接嵌入图片，无需发起独立接口请求：在渲染视图的index方法中直接生成每个订单的二维码Base64字符串，传给视图直接使用，示例如下：

  // index方法中处理二维码
  foreach ($data as &$item) {
      $qr = new QrCode("HEy there");
      $item['qrcode_base64'] = $qr->writeDataUri();
  }
  $this->data['order_data'] = $data;
  

  视图层直接使用：

  <td> <img src="<?php echo $value['qrcode_base64'] ?>" alt="..."> </td>
  

• 步骤3：校验返回内容合法性
  直接在浏览器地址栏访问二维码接口地址，确认返回结果：
  • 如果正常显示二维码，说明是页面嵌入逻辑问题
  • 如果提示下载、显示乱码或跳转登录页，可通过浏览器开发者工具的「网络」面板查看响应内容是否为纯二进制、响应头Content-Type是否正确、响应体大小是否和本地存储的二维码文件大小一致。

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