Длинные имена изображений, разбивающие CSS-divs

Question

У меня есть столбики сетки на главной странице сайта. Эти сообщения загружаются пользователями, и у них есть информация повсюду. От длинных названий записей (теперь ограничено до 50) до длинных имен изображений.

Когда изображение слишком длинное, оно разбивает HTML-код, разбивает классы, divs и т. Д. И выводит сообщение о сетке, чтобы показать «странным» способом при визуализации в Chrome и Firefox. Ниже приведены скриншоты правильных и разбитых форматов.

Correct Format

Broken Format

Это как HTML-код выглядит, когда формат является правильным:

<div class="grid-image-holder"> 
      <img onerror="this.onerror=null;this.src='https://image_URL_replaced/nopic.png';" title="This is the Post Title for SEO" alt="Same as post title" src="//cache-DOMAIN.netdna-ssl.com/wp-content/uploads/2016/05/images-160x130.png" class="attachment-160x130" height="130" width="160"> 

       </div> 
       <div class="grid-padd"> etc... 

И это то, как HTML выглядит, когда код сломана (имя изображения слишком длинный):

<div class="grid-image-holder"> 
      <img onerror="this.onerror=null;this.src='https://image_URL_replaced/nopic.png';" title="This is the Post Title for SEO" alt="Same as post title" src="//cache-DOMAIN.netdna-ssl.com/wp-content/uploads/2016/04/microsoft_aaa_02675_microsoft_office_home_business_2013_9840841-130x130.jpg" class="attachment-160x130" grid-padd"="" height="130" width="130"> 

Обратите внимание на то, что <div class="grid-padd"> теперь сломан, отсутствует height="130" width="160"></div><div class=" и продолжается только в следующем сломанном div.

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

Цените любую помощь.

P.S: Эта проблема началась, когда мы добавили этот onerror="this.onerror=null;this.src='https://image_URL_replaced/nopic.png';", чтобы заменить 404 изображения по умолчанию на сайте, поскольку CDN не на 100% надежны.

Answer 1

Хорошо, проблема решена.

У нас есть таблица в БД для хранения image_url_cache, которая хранит всю информацию тега img, чтобы ускорить загрузку изображений. Размер столбца ограничивался 512 символов. Когда img-тег больше 512 символов, он разбивает HTML, поскольку в БД хранятся только первые 512 символов.

Исправить: увеличить размер столбца для 1024 символов исправил проблему.