php - 长图像名称破坏 CSS div

Question

我在站点的主页上有网格帖子。这些帖子由用户上传，并且到处都有信息。从长帖子标题(现在限制为 50 个)到长图片名称。

当图像名称太长时，它会破坏 HTML 代码、破坏类、div 等，并导致网格帖子在 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 个字符的列大小修复了这个问题。