Laravel使用SimpleSoftwareIO/QrCode生成二维码显示破碎图标问题

问题根源 #

你当前的代码存在格式不匹配的核心问题：

• SimpleSoftwareIO/QrCode 默认生成的是 SVG格式 二维码（你已确认解码后为SVG）
• 但前端<img>标签指定的是data:image/png;base64,，用PNG的MIME类型加载SVG内容，浏览器无法识别，导致显示破碎图标。

解决方案 #

方案一：直接渲染SVG（更简单高效） #

无需转base64，直接输出生成的SVG内容：

1. 修改控制器代码：

public function generate(Request $request){
    $data = $request->input('data');
    $size = $request->input('size');
    
    // 直接生成SVG内容，跳过base64转换
    $qrcode = QrCode::size($size)->generate($data);

    return view('welcome', ['qrcode' => $qrcode]);
}

2. 修改视图代码：
   替换原<img>标签，直接输出SVG原始内容：

<div class="generatedQrcodeDisplay">
    @if(isset($qrcode))
        {!! $qrcode !!} {{-- 使用{!! !!}避免Laravel转义HTML/SVG内容 --}}
    @endif
</div>

方案二：强制生成PNG格式再转base64 #

如果必须使用PNG的base64嵌入方式，需在生成时指定格式：

1. 修改控制器代码：

public function generate(Request $request){
    $data = $request->input('data');
    $size = $request->input('size');
    
    // 强制生成PNG二进制内容
    $qrcode = QrCode::format('png')->size($size)->generate($data);

    $qrcodeBase64 = base64_encode($qrcode);

    return view('welcome', ['qrcode' => $qrcodeBase64]);
}

2. 视图代码保持不变（此时内容为PNG格式，与data:image/png;base64,匹配）：

<div class="generatedQrcodeDisplay">
    @if(isset($qrcode))
        <img src="data:image/png;base64,{{ $qrcode }}" alt="QR Code">
    @endif
</div>

额外注意事项 #

• 确保size参数为有效数字（如200），避免生成异常内容
• 用{!! !!}输出SVG时，需保证data内容可信，防止XSS攻击（若用户输入不可信，需先做内容过滤）

内容的提问来源于stack exchange，提问作者DevilBoy