如何 return `QR` 代码图像从 Laravel API 到 Angular 6 通过 JSON 响应？

Question

我正在我的项目中创建一个 Google 2FA。我的 Laravel 应用程序（后端）中有来自 bacon qr code 的二维码生成器。我希望通过 API.

将其 return 编辑为对我的 Angular 应用程序（前端）的 JSON 响应

我的 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="

我怎样才能 return 正确地做到这一点，以便我可以在我的前端呈现这个 QR 码图像？

Answer 1

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

如何 return `QR` 代码图像从 Laravel API 到 Angular 6 通过 JSON 响应？

How to return `QR` Code Image from Laravel API to Angular 6 through JSON response?

qr-code

response

httprequest

laravel

angular