Question

我在网站的主页上有网格帖子。这些帖子由用户上传，并且他们在所有地方都有信息。从长篇帖子（现在限制为50个）到长图像名称。

当图片名称太长时，它会破坏HTML代码，破坏类，div等，并导致网格帖子显示在一个“怪异的”＃34;在Chrome和Firefox中呈现时的方式。以下是正确和破碎格式的屏幕截图。

这是格式正确时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

好的，问题解决了。

我们在DB中有一个表来存储image_url_cache，它存储整个img标记信息，以便加快图像的加载时间。列大小限制为 512个字符。当img标记大于512个字符时，它会破坏HTML，因为只有前512个字符存储在数据库中。

修复：增加 1024个字符的列大小修复了问题。

打破CSS div的长图像名称

1 个答案: