如何通过 JSON 响应将 Laravel API 中的“QR”代码图像返回到 Angular 6？

Question

我正在我的项目中创建一个 Google 2FA。 我的 Laravel 应用程序（后端）中有来自 bacon qr code 的二维码生成器。 我希望通过 API 将其作为 JSON 响应返回到我的 Angular 应用程序（前端）。

我的 Laravel 控制器中有这段代码

public function google2faAuth($id){

        // Get User
        $user = User::find($id);

        // Initialise the 2FA class
        $google2fa = app('pragmarx.google2fa');

        // Save 2FA data to user2faAuth table
        $twoFaAuth = new User2faAuth();

        $twoFaAuth->userId = $user->id;
        $twoFaAuth->secretCode = $google2fa->generateSecretKey();

        $twoFaAuth->save();

        // Create QR image
        $QRImage = $google2fa->getQRCodeInline(
            config('app.name'),
            $user->email,
            $twoFaAuth->secretCode
        );

        return response()->json($QRImage);
    }

但我在 Angular 应用程序中收到的内容是这样的。

"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAIAAAAiOjnJAAAFAElEQVR4nO3dwW7YNhRFwcbo\/3+y0U0QaKOGMnlEyZ5ZGjGlpBfsA0k9\/vr8\/PwHVvvY\/QJ8T4JFQrBICBYJwSIhWCQEi4RgkRAsEoJFQrBICBYJwSIhWCQEi4RgkRAsEoJFQrBICBYJwSIhWCQEi4RgkRAsEv+uHe7jY31Sz77VPj5r5nvus3ceGfPq33dmzOPv3vnv\/DVmLBKCRUKwSCyusY6KumektrhaM62q4a7+fVfVScW\/8zwzFgnBIiFYJMIa62jk\/+VX65jjmFfrqrP6aeTnZ1bVdiNjzvz5e3o4mrFICBYJwSJxU421yqp9tKt1xkitNmNmv\/KZzFgkBIuEYJF4WY01sy41M\/7VZ428w3vrpxFmLBKCRUKwSNxUY62qJ2bOSK3a7xsZc6Teuvo+xZmwjhmLhGCRECwSYY3Vnaf+2jtcXXMa+fnRzH5lcQ5srye+E9+AYJEQLBK\/nrPyUbh6fusJ\/Rq+x38RMxYJwSIhWCQe1B9rVf+nVetMM\/XZ1d4TxRrbzJrcPDMWCcEiIVgkFq9j1efBi\/pg5lvFVbVLUVNefZYepLyAYJEQLBLhXmFdc9T9Guo+EUUP0uesaZmxSAgWCcEiseE81qrz4CPjr+r1sGrtbWTMVX1T9zJjkRAsEoJFYsNe4dGq\/bhV+1\/F+fdinGKN0DoWLyBYJASLxEN7N+zqwz7z3DvP+8\/Ul\/Xd0r9HjsblhxMsEoJF4qbzWCPq\/a9V9dZML6tVZ6dG3vPIeSy+CcEiIVgkwr3Co5nvBGfqg2L\/8Ux9h8+Z4rzaPDMWCcEiIVgkNtRYu\/oUPOEOwWIt7eo4zmPxYoJFQrBIPKh3w6r1ql09Gs5+96qip8PIs9RYvIBgkRAsEjfdCX1U9Dq\/Ov7Iz2dqxJn3vGrmzumOGYuEYJEQLBIbzrzfuR+36oxX3Y\/0zKpz7qveZ5wZi4RgkRAsEjetYxVrObv28q72RCi+T7y6xjay1mWvkBcQLBKCRWLDndCr+gjceY6qWK96Qq9261i8jGCRECwSG85jnbmzjjmzqp\/nqjWqGff0Gj1jxiIhWCQEi0RYY915j019V+DM79bfSz6tP8Xvp9\/wDH4gwSIhWCRu6o91pjiTXp9hL+6HnrHrHqH\/Z8YiIVgkBIvEhjuhn3AO6ai+i7ruyzoyph6kfBOCRUKwSGw+jzWzBrPq\/Naq\/lgz44+MOXOW6\/59QzMWCcEiIVgkHtS74fhnRmqLmbqqWG\/bVefVZ8K+xoxFQrBICBaJzX3ei28Ji1pnxNXapfje8M7+8n95kxuewQ8kWCQEi0TY571QnzG\/857BO+vL4p7Hv7zJwrHgD8EiIVgkNvQgvWqmj8PMufJif7DoobVqbW8tMxYJwSIhWCQe1B\/raNUZ7aL\/wpmZs1DFN4B7v980Y5EQLBKCReKm81jFXthMDbRqrWjme8OR5478\/Jne9K68iGCRECwSD7pLp3DnHTgjzx15h6K3lv5YfBOCRUKwSLy4xiruez4b\/+oaW12rrTpb1q2NmbFICBYJwSKxuT\/WrufuupNn5H1W3Us98z7zzFgkBIuEYJEIa6z6\/NCq9aFVZ8VWrZONnMcq+qbaK+QFBIuEYJF4WX8s3sKMRUKwSAgWCcEiIVgkBIuEYJEQLBKCRUKwSAgWCcEiIVgkBIuEYJEQLBKCRUKwSAgWCcEiIVgkBIuEYJEQLBKCReI\/leHQVUfEkcoAAAAASUVORK5CYII="

我怎样才能正确返回这个，以便我可以在我的前端呈现这个二维码图像？

Answer 1

这是扫描的 QR 图像的 base 64 内容。尝试寻找base 64到图像的转换，然后在你的前端使用img标签显示数据。