base64数据不显示base64_encode中的图像

Question

I'm trying to convert an image to base64 from an external source, below is my attempt

$imgsrc = file_get_contents('mydomain.com/assets/img/logo.png');

return response()->json([ 'img' => base64_encode($imgsrc) ]);

and below is the output,

data:image/png;base64,PCFET0NUWVBFIGh0bWw+DQo8aHRtbCBsYW5nPSJlbiI+DQogIDxoZWFkPg0KICAgICAgPG1ldGEgY2hhcnNldD0idXRmLTgiPg0KDQogICAgICA8dGl0bGU+Q29ubmVjdG5pZ2VyaWEgfCBFcnJvciA0MDQ8L3RpdGxlPg0KDQogICAgICA8bWV0YSBuYW1lPSJyb2JvdHMiIGNvbnRlbnQ9Ik5PSU5ERVgsIE5PRk9MTE9XLCBOT0FSQ0hJVkUsIE5PU05JUFBFVCIgLz4NCiAgICAgIDxsaW5rIHJlbD0ic2hvcnRjdXQgaWNvbiIgaHJlZj0iaHR0cHM6Ly9kZXZjbm1haW4uY29ubmVjdG5pZ2VyaWEuY29tL2Fzc2V0cy9pY28vZmF2aWNvbi5pY28iIHR5cGU9ImltYWdlL2ljbyI+DQoNCiAgICAgIDxtZXRhIG5hbWU9InZpZXdwb3J0IiBjb250ZW50PSJ3aWR0aD1kZXZpY2Utd2lkdGgsIGluaXRpYWwtc2NhbGU9MS4wLCBtYXhpbXVtLXNjYWxlPTEuMCwgdXNlci1zY2FsYWJsZT1ubyIgLz4NCiAgICAgIDxsaW5rIHJlbD0ibWFuaWZlc3QiIGhyZWY9Imh0dHBzOi8vd3d3LmNvbm5lY3RuaWdlcmlhLmNvbS9hc3NldHMvbWFuaWZlc3QuanNvbiIgLz4NCg0KICAgICAgPGxpbmsgaHJlZj0iaHR0cHM6Ly9kZXZjbm1haW4uY29ubmVjdG5pZ2VyaWEuY29tL2Fzc2V0cy9wbHVnaW5zL2ZvdW5kcnkvY3NzL2ZvbnQtYXdlc29tZS5taW4uY3NzIiByZWw9InN0eWxlc2hlZXQiIHR5cGU9InRleHQvY3NzIiBtZWRpYT0iYWxsIj4NCiAgICAgIDxsaW5rIGhyZWY9Imh0dHBzOi8vZGV2Y25tYWluLmNvbm5lY3RuaWdlcmlhLmNvbS9hc3NldHMvcGx1Z2lucy9ib290c3RyYXAvY3NzL2Jvb3RzdHJhcC5taW4uY3NzIiByZWw9InN0eWxlc2hlZXQiIHR5cGU9InRleHQvY3NzIiBtZWRpYT0iYWxsIiAvPg0KICAgICAgPGxpbmsgaHJlZj0iaHR0cHM6Ly9kZXZjbm1haW4uY29ubmVjdG5pZ2VyaWEuY29tL2Fzc2V0cy9wbHVnaW5zL2FuaW1hdGVjc3MvY3NzL2FuaW1hdGUubWluLmNzcyIgcmVsPSJzdHlsZXNoZWV0IiB0eXBlPSJ0ZXh0L2NzcyIgbWVkaWE9ImFsbCIgLz4NCiAgICAgIDxsaW5rIGhyZWY9Imh0dHBzOi8vZGV2Y25tYWluLmNvbm5lY3RuaWdlcmlhLmNvbS9hc3NldHMvcGx1Z2lucy9pbWFnZWhvdmVyL2Nzcy9pbWFnZWhvdmVyLm1pbi5jc3MiIHJlbD0ic3R5bGVzaGVldCIgdHlwZT0idGV4dC9jc3MiIG1lZGlhPSJhbGwiIC8+DQogICAgICA8bGluayBocmVmPSJodHRwczovL2RldmNubWFpbi5jb25uZWN0bmlnZXJpYS5jb20vYXNzZXRzL2Nzcy92cTlkOVVEYVdoLmNzcyIgcmVsPSJzdHlsZXNoZWV0IiB0eXBlPSJ0ZXh0L2NzcyIgbWVkaWE9ImFsbCIgLz4NCiAgPC9oZWFkPg0KICA8Ym9keT4NCiAgICA8c2VjdGlvbiBjbGFzcz0iZnVsbHNjcmVlbiI+DQogICAgICA8ZGl2IGNsYXNzPSJjb250YWluZXIgdi1hbGlnbi10cmFuc2Zvcm0iPg0KICAgICAgICAgIDxkaXYgY2xhc3M9InJvdyI+DQogICAgICAgICAgICAgIDxkaXYgY2xhc3M9ImNvbC1zbS0xMCBjb2wtc20tb2Zmc2V0LTEiPg0KICAgICAgICAgICAgICAgICAgPGRpdiBjbGFzcz0idGV4dC1jZW50ZXIiPg0KICAgICAgICAgICAgICAgICAgICAgIDxpIGNsYXNzPSJ0aS1yZWNlaXB0IGljb24gaWNvbi1sZyBtYjI0IG1iLXhzLTAiPjwvaT4NCiAgICAgICAgICAgICAgICAgICAgICA8aDEgY2xhc3M9ImxhcmdlIj5QYWdlIE5vdCBGb3VuZDwvaDE+DQogICAgICAgICAgICAgICAgICAgICAgPHA+VGhlIHBhZ2UgeW91IHJlcXVlc3RlZCBjb3VsZG4ndCBiZSBmb3VuZCAtIHRoaXMgY291bGQgYmUgZHVlIHRvIGEgc3BlbGxpbmcgZXJyb3IgaW4gdGhlIFVSTCBvciBhIHJlbW92ZWQgcGFnZS48L3A+DQogICAgICAgICAgICAgICAgICAgICAgPGEgY2xhc3M9ImJ0biIgaHJlZj0iaHR0cHM6Ly93d3cuY29ubmVjdG5pZ2VyaWEuY29tLyI+R28gQmFjayBIb21lPC9hPg0KICAgICAgICAgICAgICAgICAgICAgIDxhIGNsYXNzPSJidG4iIGhyZWY9Imh0dHBzOi8vd3d3LmNvbm5lY3RuaWdlcmlhLmNvbS9wYWdlL2NvbnRhY3QtdXMiPkNvbnRhY3QgVXM8L2E+DQogICAgICAgICAgICAgICAgICA8L2Rpdj4NCiAgICAgICAgICAgICAgPC9kaXY+DQogICAgICAgICAgPC9kaXY+DQogICAgICAgICAgPCEtLWVuZCBvZiByb3ctLT4NCiAgICAgICAgICA8ZGl2IGNsYXNzPSJlbWJlbGlzaC1pY29ucyI+DQogICAgICAgICAgICAgIDxpIGNsYXNzPSJ0aS1oZWxwLWFsdCI+PC9pPg0KICAgICAgICAgICAgICA8aSBjbGFzcz0idGktY3Jvc3MiPjwvaT4NCiAgICAgICAgICAgICAgPGkgY2xhc3M9InRpLXN1cHBvcnQiPjwvaT4NCiAgICAgICAgICAgICAgPGkgY2xhc3M9InRpLWFubm91bmNlbWVudCI+PC9pPg0KICAgICAgICAgICAgICA8aSBjbGFzcz0idGktc2lnbmFsIj48L2k+DQogICAgICAgICAgICAgIDxpIGNsYXNzPSJ0aS1wdWxzZSI+PC9pPg0KICAgICAgICAgICAgICA8aSBjbGFzcz0idGktbWFya2VyIj48L2k+DQogICAgICAgICAgICAgIDxpIGNsYXNzPSJ0aS1wdWxzZSI+PC9pPg0KICAgICAgICAgICAgICA8aSBjbGFzcz0idGktYWxlcnQiPjwvaT4NCiAgICAgICAgICAgICAgPGkgY2xhc3M9InRpLWhlbHAtYWx0Ij48L2k+DQogICAgICAgICAgICAgIDxpIGNsYXNzPSJ0aS1hbGVydCI+PC9pPg0KICAgICAgICAgICAgICA8aSBjbGFzcz0idGktcHVsc2UiPjwvaT4NCiAgICAgICAgICA8L2Rpdj4NCiAgICAgIDwvZGl2Pg0KICAgICAgPCEtLWVuZCBvZiBjb250YWluZXItLT4NCiAgPC9zZWN0aW9uPg0KICAgICAgICAgIDxzY3JpcHQgdHlwZT0idGV4dC9qYXZhc2NyaXB0Ij4gDQoNCiAgICAgICAgICAgIHdpbmRvdy5jbl91cmwgPSAnaHR0cHM6Ly93d3cuY29ubmVjdG5pZ2VyaWEuY29tLyc7DQoNCiAgICAgICAgICAgIHdpbmRvdy5iYXNlX3VybCA9ICdodHRwczovL3d3dy5jb25uZWN0bmlnZXJpYS5jb20vJzsNCg0KICAgICAgICAgICAgd2luZG93LmNhcnNfdXJsID0gJ2h0dHBzOi8vY2Fycy5jb25uZWN0bmlnZXJpYS5jb20vJzsNCg0KICAgICAgICAgICAgd2luZG93LmRlYWxzX3VybCA9ICdodHRwczovL2RlYWxzLmNvbm5lY3RuaWdlcmlhLmNvbS8nOw0KDQogICAgICAgICAgICB3aW5kb3cuZXZlbnRzX3VybCA9ICdodHRwczovL2V2ZW50cy5jb25uZWN0bmlnZXJpYS5jb20vJzsNCg0KICAgICAgICAgICAgd2luZG93LnJlYWxlc3RhdGVfdXJsID0gJ2h0dHBzOi8vcmVhbGVzdGF0ZS5jb25uZWN0bmlnZXJpYS5jb20vJzsNCg0KICAgICAgICAgICAgd2luZG93LmpvYnNfdXJsID0gJ2h0dHBzOi8vam9icy5jb25uZWN0bmlnZXJpYS5jb20vJzsNCg0KDQogICAgICAgICAgICAvLyBjb25zdGFudCBnbG9iYWwgc291cmNlcyByZWZlcmVuY2UNCg0KICAgICAgICAgICAgIHdpbmRvdy5nbG9iYWxfc3JjID0gImh0dHBzOi8vZGV2Y25tYWluLmNvbm5lY3RuaWdlcmlhLmNvbS8iOw0KDQogICAgICAgICAgICAgd2luZG93LmxvY2FsX3NyYyA9ICJodHRwczovL3d3dy5jb25uZWN0bmlnZXJpYS5jb20vYXNzZXRzLyI7DQoNCiAgICAgICAgICAgICANCiAgICAgICAgICAgIHdpbmRvdy5wYWdlID0gJyc7DQogICAgICAgICAgICB3aW5kb3cuY3RybCA9ICcnOw0KDQogICAgICAgIDwvc2NyaXB0Pg0KICAgICAgICA8c2NyaXB0IGRlZmVyIHNyYz0iaHR0cHM6Ly93d3cuY29ubmVjdG5pZ2VyaWEuY29tL2Fzc2V0cy9hc3NldHMvanMvYm9vdC5taW4uanMiPjwvc2NyaXB0Pg0KICA8L2JvZHk+DQo8L2h0bWw+DQoNCg==

but on <img> tag, its not rendering, any help, ideas please.

Answer 1

If you want to display the image, try this

$imageData = "/9j/4AAQSkZJRgABAQEAYABgAAD........";//base64_encode strong
echo '<img src="data:image/gif;base64,' . $imageData . '" />';

OR

$code_base64 = $row['content'];//base64_encode strong
$code_base64 = str_replace('data:image/jpeg;base64,','',$code_base64);
$code_binary = base64_decode($code_base64);
$image= imagecreatefromstring($code_binary);
header('Content-Type: image/jpeg');
imagejpeg($image);
imagedestroy($image);