ты ее прицепил к документу. Как только ты ее отцепишь браузер сразу выкинет "внутренности" картинки.
                  
                  
                  
                  
                  
                  На SSR браузер получает готовый html видит там картинки, видосики и айфреймы загружает их как будто это обычный хтмл. Затем загружается JS файл с твоим бандлом и вызывается гидрация, пусть это будет вторая секунда когда юзер уже смотрит на готовую страницу. Гидрация берет отцепляет все ноды от дома - картинки пропадают, состояние видоса пропадает, айфреймы свой браузерный стейт тоже теряют. А затем гидрация сразу же прицепляет это все обратно. В итоге все что браузер уже сделал, он начинает делать заново. Грузит src видосов, картинок и айфреймов.
                  
                  
                  
                  
                  
                  Вопрос зачем гидрация отцепляла ноды от дерева?
                  
                  
                
https://drive.google.com/file/d/1GeDHFSAyolu27uyg7k0DzO6ZF-HcuFNq/view?usp=sharing пример записал такого поведения, но только с айфреймом ютуб. svelte/sapper. До этого был лейзиоад на айфрейм, но реклама не показывается при таком подходе в айфрейме - у них google полиси по поводу рекламы в автоплей режиме (лейзи был реализован через thumb на котором по клику грузился iframe)
 Alexander
                          Ponomarev
                        
                      
                    
                    
                    
                    
                      Автор вопроса
                      
                      
                        
                          Alexander
                          Ponomarev
                        
                      
                    
                    
                    
                    
                      Автор вопроса
                    
                    
                  спасибо =) вот и тот несуществующий узкий кейс с видосом ютюба как основным контентом страницы
 Alexander
                          Ponomarev
                        
                      
                    
                    
                    
                    
                      Автор вопроса
                      
                      
                        
                          Alexander
                          Ponomarev
                        
                      
                    
                    
                    
                    
                      Автор вопроса
                    
                    
                  а картинки у вас справа они тоже под свелтом или нет? Что будет если снять с них height?
если речь о src https://static.zentrum-der-gesundheit.de/img/df912d304392cfce8a050d21f26dc94e?width=100&height=100 то на сервере крутится imgproxy в который через nginx эти параметры передаются, если убрать высоту то загрузится c оригинальным аспект ретио и заданной шириной https://static.zentrum-der-gesundheit.de/img/df912d304392cfce8a050d21f26dc94e?width=100, а если убрать ширину тоже, то загрузится с полной шириной картинки
 Alexander
                          Ponomarev
                        
                      
                    
                    
                    
                    
                      Автор вопроса
                      
                      
                        
                          Alexander
                          Ponomarev
                        
                      
                    
                    
                    
                    
                      Автор вопроса
                    
                    
                  это классно, но я хотел посмотреть как браузер поведет себя если у него не будет инфы о высоте картинки, там возможно надписи схлопнутся и обратно расхлопнутся
а у него и нет атрибута, я пока вам видео записывал, себе в блокнот добавил, что нужно прописать, чтобы не скакало
 Alexander
                          Ponomarev
                        
                      
                    
                    
                    
                    
                      Автор вопроса
                      
                      
                        
                          Alexander
                          Ponomarev
                        
                      
                    
                    
                    
                    
                      Автор вопроса
                    
                    
                  ну знач у него стили видимо жестко установлены?
не совсем понял вопрос
 Alexander
                          Ponomarev
                        
                      
                    
                    
                    
                    
                      Автор вопроса
                      
                      
                        
                          Alexander
                          Ponomarev
                        
                      
                    
                    
                    
                    
                      Автор вопроса
                    
                    
                  в CSS стилях этой картинки задана высота?
задана только ширина через w-24 у родителя, высота определена через .image.is-square {padding-top: 100%;}, а как раз в примере на странице рецептов я правило на фигуру написал неправильно .image-square - которого не существует в tailwind
 Alexander
                          Ponomarev
                        
                      
                    
                    
                    
                    
                      Автор вопроса
                      
                      
                        
                          Alexander
                          Ponomarev
                        
                      
                    
                    
                    
                    
                      Автор вопроса
                    
                    
                  да вот если паддинг топ удалить из стилей и посмотреть как она будет гидрироваться, то там будет мерцание?
как раз на видео раздел рецептов с правилом неправильным и паддинга нет - ничего не мерцает
 Alexander
                          Ponomarev
                        
                      
                    
                    
                    
                    
                      Автор вопроса
                      
                      
                        
                          Alexander
                          Ponomarev
                        
                      
                    
                    
                    
                    
                      Автор вопроса
                    
                    
                  Обсуждают сегодня