Base64 формат картинки, что делать на фронтенде?

Question

[Mark321]

Добрый день, подскажите пожалуйста, приходит джсон сервера, картинка зашифрована в формате base64(50 тысяч символов и вес 470 кб показывает в консоли)
При вставке картинки в тег имг, картинка отображается, но т.к я с этим никогда не сталкивался, мне кажется, что эту картинку как-то надо обрабатывать на фронтенде? декодировать? или это нормально

Comments

[Василий Банников]

Если и так отображается, то зачем делать с ней что-то ещё?

[Mark321]

Василий Банников, не знаю, выглядит супер стремно, если учесть что я маплю пришедшие данные в реакте и просто отображаю их, то там под капотом же в теге срц 50 тысяч строк, возможно это как-то плохо влияет на производительность приложения

[Василий Банников]

Mark321, Вообще да, но лучший вариант от этого избавиться - попросить бэкенд, чтобы они вместо base64 отдавали url картинки.

Answer 1

[Вадим]

что делать на фронтенде

Пойти к бэкендеру и сказать: ты шо, дурак, зачем нам 470киллобайт не кешируемых данных по сети каждый раз гонять?!
И пинать чтоб присылал ссылку.
(а на деле я так понимаю там не одна картинка такая и не кешируемых данных в разы больше гоняется, что вообще ужас)

На серьёзном хайлоад проекте это была бы, условно, смерть серверам по трафику.
Но клиенты с не самым хорошим интернетом отлетели бы ещё раньше. А не самый хороший это даже мобильный 4g в средних условиях приёма сигнала. 470кб это очень, очень много для всего лишь одного запроса. Тяжелее запрос - дольше время до отрисовки.
Ну и мобильный интернет далеко не у всех безлимитный. А не в России и подавно.

А ещё есть лимиты на длину строки. В разных движках причём разные. Так что, теоритически, наверное, можно упереться в лимит строки и картинка не отобразится или будет битая.

Comments

[Mark321]

Вопрос в том, что это тестовое задание, там джсон с форматом таких картинок, бэкенд я сам пишу, на бэкенде каким образом эти картинки можно обработать? в каком направлении гуглить

[Alexandroppolus]

Mark321, картинки лежат на бэке в виде файлов?

[Mark321]

Alexandroppolus, есть файл дб.джсон, там объект, в каждом объекте картинка в формате бейс64.

[Вадим]

Mark321, а.. Ну если тестовое.. Это конечно в корне все меняет. Тут зависит от того, на какую позицию вы притендуете и будут ли смотреть задание вместе с вами. Потому что могли специально так сделать, чтоб не выделять на картинки для тестового ресурсы хостинга. Яб пошёл это спросил у ответственного, надо с этим что то делать или нет. Если скажут надо то.. Ну, абстрактно - сделать маршут, который будет отдавать по значению определённого параметра соответствующую картинку.
Условно, /images/home, images/contacts и тд.
Сделать условную мапу home => convert(base64 home image) и отдавать картинку при обращении на этот маршрут. Это если картинок нет. Если есть то обычный файловый сервер.

[imko]

Mark321, не хотел бы я быть в твоей ситуации)

[Mark321]

Вадим, Это конкурс от вконтакте, называется вк кап, не вариант спрашивать.

[Вадим]

Mark321, ну вот, опять новая информация, которая снова все меняет обратно) раз конкурс, то нужно сделать настолько хорошо, насколько можно, будто бы это продакшен, я считаю.

Answer 2

[zkrvndm]

Обрабатывать такую картинку не обязательно, но если есть такое желание, можно его конвертировать в Blob и получить на него ссылку и уже эту ссылку вставить в атрибут src у картинки:

(async function() {
    
    var base64 = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE2LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgd2lkdGg9IjQ1OXB4IiBoZWlnaHQ9IjQ1OXB4IiB2aWV3Qm94PSIwIDAgNDU5IDQ1OSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDU5IDQ1OTsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc+DQoJPGcgaWQ9InNoYXJlIj4NCgkJPHBhdGggZD0iTTQ1OSwyMTYuNzVMMjgwLjUsMzguMjV2MTAyYy0xNzguNSwyNS41LTI1NSwxNTMtMjgwLjUsMjgwLjVDNjMuNzUsMzMxLjUsMTUzLDI5MC43LDI4MC41LDI5MC43djEwNC41NUw0NTksMjE2Ljc1eiIvPg0KCTwvZz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjwvc3ZnPg0K';
    var blob = await (await fetch(base64)).blob();
    var url = URL.createObjectURL(blob);
    
    document.querySelector('img').src = url; // Заменить селектор на свой
    
})();

В идеале этот Blob и вовсе надо сохранить в базе данных браузера и при повторной загрузке страницы не запрашивать его с сервера заново, а просто брать его из базы данных браузера. Оставим за кадром вопрос, почему вообще картинки отдаются таким неэффективным образом.