Эта функция должна работать. у этого есть параметр фото, который содержит строку base64, а также путь к существующему каталогу изображений, если у вас уже есть существующее изображение, которое вы хотите отключить, в то время как вы сохраняете новый.
public function convertBase64ToImage($photo = null, $path = null) {
if (!empty($photo)) {
$photo = str_replace('data:image/png;base64,', '', $photo);
$photo = str_replace(' ', '+', $photo);
$photo = str_replace('data:image/jpeg;base64,', '', $photo);
$photo = str_replace('data:image/gif;base64,', '', $photo);
$entry = base64_decode($photo);
$image = imagecreatefromstring($entry);
$fileName = time() . ".jpeg";
$directory = "uploads/customer/" . $fileName;
header('Content-type:image/jpeg');
if (!empty($path)) {
if (file_exists($path)) {
unlink($path);
}
}
$saveImage = imagejpeg($image, $directory);
imagedestroy($image);
if ($saveImage) {
return $fileName;
} else {
return false; // image not saved
}
}
}
Вам нужно изменить свой код, тогда он будет отлично работать, см. Этот код https://stackblitz.com/edit/react-jessyq
Измените размер окна вывода увидим разные изображения для разных размеров. Надеюсь, что ваша проблема будет решена. HAPPY CODING:)
изображение тег используется для адаптивного изображения, насколько я знаю, изображение будет изменяться в зависимости от ширины устройства. Для этой цели вы должны использовать тег изображения с медиа-запросом, подобным этому
<picture>
<source media="(min-width: 650px)" srcset="img_pink_flowers.jpg">
<source media="(min-width: 465px)" srcset="img_white_flower.jpg">
<img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>
. 117] И вы не можете использовать класс в реакции, используйте className вместо класса.