Я сохраняю изображения товаров в MongoDB через base64. Проблема заключается в том, что при отрисовке этих элементов у клиента, при загрузке они занимают достаточно большое количество времени (особенно, если изображение весит от 1МБ). Есть ли более оптимальные способы хранения и передачи изображений без хранения на сервере изображений?
Сервер Express.js (преобразование в строку для отображения у клиента):
export const collectionDto = (collection) => {
const { imgData, imgType } = collection.img;
const img = `data:${imgType};base64,${imgData.toString("base64")}`;
return {
name: collection.name,
img,
isActive: collection.isActive,
id: collection._id,
};
};
Отрисовка изображения элемента на клиенте React.js:
<img
src={collection.img}
alt=""
className="admin__collections__img"
loading="lazy"
/>
Модель коллекции для MongoDB:
import { Schema, model } from "mongoose";
const CollectionSchema = new Schema({
name: {
type: String,
unique: true,
required: true,
},
img: {
imgData: {
type: Buffer,
required: true,
},
imgType: {
type: String,
required: true,
},
},
isActive: {
type: Boolean,
default: false,
},
});
export const CollectionModel = model(
"collection",
CollectionSchema,
"collections"
);