Laravel 应用程序中仅显示破碎的图像图标，而不显示生成的二维码

Question

路线：

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

在控制器中：

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]);
    }

视图中：

<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>

我在浏览器中得到的结果：

二维码生成成功（我解码了它并查看了它的svg），但只显示了损坏的图像图标。

我该如何解决这个问题？

我不知道该怎么做，因为在我看来它应该工作得很好

Answer 1

正如评论中提到的，这是一个 svg 文件。

数据类型必须是：data:image/svg+xml;

我发现 embed 标签在这种情况下效果更好：

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

>

知道您不需要对 svg 文件进行 Base64 编码也很高兴。所以你也可以将原始输出放入其中。它更具可读性。

更多信息可以在这个答案中找到： Base64 / SVG HTML 图像未显示