Отображение изображений, хранящихся в MongoDb

Question

У меня есть интересное приложение. Изображения и другая соответствующая информация хранятся в MongoDb. Обычно размер изображений составляет около 1 мб. Изображения отображаются с бесконечным прокруткой. Когда загружается длинный скрипт с базой base64, ошибки браузера или время ответа действительно высоки (особенно для Internet Explorer) Каков наилучший способ отображения изображений, хранящихся в MongoDb?

Answer 1

Я полагаю, у вас есть часть на стороне сервера этого приложения? Почему бы вам не создать крошечный API для извлечения изображений?

Таким образом, ваш браузер будет иметь информацию об изображении и может запросить у вас свой сервер, что-то в строке http://your_server/api/image/imageID или http://your_server/images/imagename, а затем ваш сервер будет просто передавать это изображение, вам не нужно его хранить в файловой системе.

На стороне клиента (браузер) вам просто нужно реализовать «ленивую загрузку».

Answer 2

Я думаю, что лучший способ достичь этого - физически загрузить файл в какую-либо общую папку на вашем сервере. Это должно быть подъезд так, что вам только нужно использовать что-то вроде

http://www.myhost.com/images/my/path/to/image.jpg

Вы все еще можете сохранить свой Base64 изображение в MongoDB в качестве резервной копии, однако, это не самый лучший способ Извлеките изображения из-за проблем с производительностью (как вы видели). Я рекомендую вам сделать следующее:

Каждый раз, когда вы храните изображение на монго, не забудьте также сохранить «файл изображения» как в каком-либо общественном месте на вашем сервере. Имейте в виду, что вы должны сохранить путь к этому файлу на модели монго, которую вы используете. Итак, в следующий раз, когда вы вызываете объект, а не получаете изображение базы 64, вы должны получить только путь к изображению.

Позволяет сказать, у вас есть эта модель

myModel = { 
    name: "some name", 
    image64: "someextralongstringveryveryveryweird......", 
    imageUrl: "/images/my/path/to/image/imagename-id.jpg" 
} 

следующий раз, когда вы запрос на него, вы можете просто игнорировать image64 используя проекцию Монго, и в вас стороне клиента вы просто использовать некоторые HTML теги, который использует этого URL.

<img src="/images/my/path/to/image/imagename-id.jpg"> 

Это поможет вам справиться с высокой производительностью.

Есть несколько библиотек, которые могут помочь вам в создании образа. ImageMagick - это тот, который я использовал и настолько универсален.

Answer 3

Если вы используете MongoDB, вы должны хранить изображения в своей базе данных с помощью GridFS (http://excellencenodejsblog.com/gridfs-using-mongoose-nodejs/), которая предоставляет что-то вроде виртуальной файловой системы для вашего приложения.

Используя GridFS, вы можете написать метод контроллера, который передает запрошенный файл из экземпляра MongoDB и передает содержимое файла в ответ.

Answer 4

Я бы порекомендовал хранить изображения в файловой системе и использовать веб-сервер для обслуживания их клиентов. Для исполнения, я бы поставил их на CDN - который сможет обрабатывать трафик.

В вашем хранилище приложений (mongo) вы можете сохранить URL-адрес/местоположение на изображении, а затем использовать его при извлечении изображения в своем javascript-коде.

Кроме того, в вашем коде я бы рекомендовал предварительно загружать изображения с помощью javascript, который предварительно загружает изображения до того, как пользователь прокрутил их, чтобы увидеть их. Есть несколько отличных инструментов, которые вы можете использовать для этого.

В случае, если вы не можете изменить хранилище, и вы должны использовать mongo так, как он есть - я бы посмотрел на предварительную загрузку изображений с помощью javascript.