QR Code not displaying

I'm currently using the "pragmarx/google2fa-qrcode" package in my project for Two Factor Authentication. It generates a QR code data url in the controller:

$qr_code = $this->google2FA->getQRCodeInline( "Company", $user->email, $secret );

And I display it in a blade file in an image tag:

<img alt="qr code" src="{{ $qr_code }}">

This works perfect locally however when pushed to Vapor it shows a broken image icon. Does anyone know why and/or how to fix this?

Edit: I modified it to: <img alt="qr code" src="{!! $qr_code !!}"> and now it is displaying but with "="" encoding="UTF-8" ?=""> before the code. How do I get rid of it?

darrenlr

3 years ago

Level 5

@Snapey

When using {!! $qr_code !!} the generated html looks like this:

<ol class="list-inline">
        <li>1. Open your Authenticator app and <b>scan the following QR-code</b>
            <p class="text-center">
                 <img alt="qr code" src="<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200" height="200" viewBox="0 0 200 200"><rect x="0" y="0" width="200" height="200" fill="#fefefe"/><g transform="scale(4.082)"><g transform="translate(4,4)"><path fill-rule="evenodd" d="M8 0L8 4L9 4L9 5L8 5L8 7L9 7L9 5L10 5L10 7L11 7L11 8L12 8L12 9L11 9L11 11L13 11L13 10L14 10L14 9L15 9L15 8L17 8L17 9L16 9L16" fill="#000000"/></g></g></svg>
">
            </ p>
        </ li>
        <li>2. Enter the 6-digit code generated by the Authenticator app.</li>
 </ ol>

When using {{ $qr_code }} like I was originally it looks like this:

<ol class="list-inline">
  <li>1. Open your Authenticator app and <b>scan the following QR-code</b>
    <p class="text-center">
      <img alt="qr code" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADIEAQAAABXwbpWAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0T//xSrMc0AACabSURBVHja7Z15eBRF+sc/IRBIAA8gEIiEBUQuEVDcFVhQTk/AlTsKiCCXiLqEFRTUBZEjsqwcSqIoCAIq4A+UhdUFFTRhV66AgoCA3FfCIQQwIczvj5lkqqt7uqfnyiTU93nmebq7rvet6ne63qp63zfC4XA4UFBQMEQJ1QUKCkpAFBSUgCgoKAFRUFACoqCgBERBQQmIgoISEAUFJSAKCkpAFBQUlIAoKCgBUVBQAqKgoAREQUEJiIJC+KGkvxX862fYWS60REd1gRGb3fdvHrEuM/JxiPg2OPScXg/za2mf1boZHivrfR1GPCTd4r6eNRyujNamP18dSnqw5lm3BbZU1j7rGgU1KxvnPxkJCw5qn92WB51rOK9z3oIZXbXpMRVhWLTr5hq8ecychxl3Qc6K0L4rDS7CQ/X8qMDhJ5IPOxwQ2l/TWQIBR7wrk5PmCBr2jdS3N26AjQpmGNPsmOHO0mKvPj27h+cqU6bo828a6Dn/7vH6/K+vc6dfiNOntzstVBDtgYcj7ixNZ4X+XUk+7N/YqimWgoLSQRQUCkkHKSpY+g/tfY9vIfKU83rD23Dka236A5vh5v3GdR1fDd+8b93m4u7u6xsi4OFPXDf/gcUpXpRfD6x33Uwyz/vNm3D8v8KDuwPTbwU8/BlYapL+sHG6EhAD/NQ7sPU1XOwfDSNmQGKsNr1THOSvLayvD2Of0abvHg83e6j72HJItHgZJszV3vfZ4XyHAPKehcSfrXnQtGHR3rqfYYKUXx6Hmi09l6+5W5+/YVvt">
    </p>
   </li>
   <li>2. Enter the 6-digit code generated by the Authenticator app.</li>
</ol>

Snapey

3 years ago

Level 122

@darrenlr is this the code on vapor it locally?