Laravel+jQuery：如何让img的src显示Base64图片内容而非URL？

你的问题核心在于直接把Laravel接口的URL设置为img的src属性——浏览器会发起请求到这个URL，但它会把接口返回的Base64字符串当作图片文件来尝试解析，而不是将其识别为data URI格式的图片源。要实现你想要的效果，需要先通过AJAX请求获取接口返回的Base64数据，再把这个数据直接赋值给img的src属性。

修改后的前端jQuery代码 #

const url = "http://example.com/";
// 先发起AJAX请求获取Base64图片数据
$.get(url + 'get_image/10', function(base64Data) {
    // 创建img元素并设置src为返回的Base64数据
    const img = $('<img>').attr('src', base64Data);
    // 将img添加到div中
    $('div').append(img);
}).fail(function() {
    // 处理请求失败的情况
    console.error('获取图片数据失败');
});

Laravel后端的注意事项 #

确保你的get_image方法没有额外的输出（比如调试信息、空格等），否则会导致Base64数据被污染，无法正确显示图片：

public function get_image($id) {
    // 先判断媒体文件是否存在，避免报错
    $media = Media::where('id', $id)->first();
    if (!$media) {
        abort(404, '图片不存在');
    }
    $filePath = $media->file_path;
    // 确保文件路径正确且有读取权限
    if (!file_exists($filePath) || !is_readable($filePath)) {
        abort(403, '无法读取图片文件');
    }
    $base64 = base64_encode(file_get_contents($filePath));
    // 返回纯Base64字符串，不要添加多余内容
    return response('data:image/png;base64,' . $base64)->header('Content-Type', 'text/plain');
}

这样修改后，前端会先请求接口拿到完整的data URI格式的Base64字符串，再设置给img的src，就能正确显示图片了。

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