Laravel Question posted in
The official Laravel Documentation can be found here.

Only broken image icon is displayed instead of generated QR code in Laravel app (used SimpleSoftwareIOQrCode))

The route:

Route::get('/generated',[QRCodeController::class,'generate'])->name('qr.generateqrCode');

In the controller:

public function generate(Request $request){
        $data = $request->input('data');
        $size = $request->input('size');
        
        $qrcode = QrCode::size($size)->generate($data);

        // Convert the QR code image to base64 for embedding in HTML
        $qrcodeBase64 = base64_encode($qrcode);

        // Pass the base64-encoded QR code image to the view
        return view('welcome', ['qrcode' => $qrcodeBase64]);
    }

In the view:

<div class="body-simpleQR">
        <form action="{{ route('qr.generateqrCode') }}">
            <label for="textbox1">Link:</label>
            <input class="dataentry_bar" type="text" name="data" id="textbox1" placeholder="Enter link...">

            <div class="size-container">
                <label for="textbox2">Size:</label>
                <input class="sizeentry_bar" type="text" name="size" id="textbox2" placeholder="Enter size..."> px
            </div>

            <div class="button-container">
                <button class="createQR" type="submit" name="myButton">Generate QR code(s)</button>
            </div>
        </form>
    </div>

        <div class="generatedQrcodeDisplay">
            <!-- This is where the generated QR code image will be displayed -->
            @if(isset($qrcode))
                <img src="data:image/png;base64,{{ $qrcode }}" alt="QR Code">
            @endif
        </div>

The result I had in my browser:
enter image description here

The QR code is generated succesfully(I decoded it and look its svg) but only the broken image icon is displayed.

How can I fix this?

I don’t know what to do because in my mind it should work fine

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Thank you all guys but I found the solution. I completely changed my approach, Instead of generating the QR in the controller and then passing it to the view via a route, I simply passed the two parameters($stringdata fot the QR and $size) and generate it directly in the view instead such as:

    <div class="generatedQrcodeDisplay">
        <!-- This is where the generated QR code image will be displayed -->
        @if(isset($stringdata)&&isset($size))
            {!! QrCode::size($size)->generate($stringdata) !!}
        @endif
    </div>

    The result: enter image description here


  2. 0

    As mentioned in the comments, it’s an svg file.

    The data type must be: data:image/svg+xml;

    I discovered that the embed tag works better in this case:

    <embed src="data:image/svg+xml;base64,{{ $qrcode }}>

    It’s also good to know that you don’t need to base64-encode for svg files. So you can also just put the raw output in it. It’s more readable.

    More info can be found in this answer:
    Base64 / SVG HTML image is not displayed

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search