Wordpress，Divi 主题：博客模块未呈现文章图像答案

【问题标题】：Wordpress, Divi Theme: Blog Module not rendering article imageWordpress，Divi 主题：博客模块未呈现文章图像
【发布时间】：2020-01-11 14:23:38
【问题描述】：

我在我的客户 wordpress 网站上使用 divi 主题。在每个帖子页面的底部，我都有一个“相关文章”部分，显示与当前文章类别匹配的其他博客文章。我还添加了额外的 CSS 来均衡在页面加载时工作的列高度，但是当我单击“旧条目”时，它无法正确呈现图像。我试过搜索类似的问题，但没有运气。

这是一个示例帖子页面：https://mywingwoman.com.au/30-fun-date-ideas-for-summer

这是用于均衡列的附加 CSS：

/** Equalise blog article heights in related blog section **/
.bloggrid .et_pb_salvattore_content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.bloggrid article {
        margin-bottom: 20px !important;
    -webkit-box-flex: 1;
        -ms-flex: 1 0 auto;
            flex: 1 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}

.bloggrid .post-content {
    -webkit-box-flex: 1;
        -ms-flex: 1 0 auto;
            flex: 1 0 auto;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}

.bloggrid .column {
        margin-bottom: 20px !important;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}
/** Remove extra white space below the image of blogs in the related articles section on each blog page **/
.bloggrid .et_pb_post .et_pb_image_container
{
margin: -20px -20px 0px;
}```

【问题讨论】：

标签： javascript html css wordpress

【解决方案1】：

问题与 JetPack 和延迟加载功能有关。

尝试检查图像并删除所有与延迟加载相关的属性。

data-lazy-srcset="https://i1.wp.com/mywingwoman.com.au/wp/wp-content/uploads/2019/02/Romantic-Gesture-cropped.jpg?fit=1950%2C500&amp;ssl=1 479w, https://i1.wp.com/mywingwoman.com.au/wp/wp-content/uploads/2019/02/Romantic-Gesture-cropped.jpg?resize=400%2C250&amp;ssl=1 480w " 
data-lazy-sizes="(max-width:479px) 479w, 100vw " 
data-lazy-src="https://i1.wp.com/mywingwoman.com.au/wp/wp-content/uploads/2019/02/Romantic-Gesture-cropped.jpg?resize=400%2C250&amp;is-pending-load=1#038;ssl=1"
srcset="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"

删除那些东西 ^ 并出现图像。所以一个快速的解决方法是禁用延迟加载。

【讨论】：