Tumblr博客首页portfolio板块图片不加载，仅帖子内显示问题排查

我的Tumblr博客照片帖存在显示异常：首页滚动至portfolio-post板块时，帖子图片无法加载，但进入帖子详情页后图片可正常显示。

问题代码片段： #

<!-- start portfolio -->
<section class="page-section portfolio-wrap">

  <div class="row">
    <div class="text-center">
      <div {block:SearchPage}style="display: none;"{/block:SearchPage}{block:TagPage}style="display: none;"{/block:TagPage}>{block:IfPostAreaTitle}<h3>{text:Post Area Title}</h3>{/block:IfPostAreaTitle}</div>

      {block:TagPage}<h3>{lang:Posts tagged Tag}</h3>{/block:TagPage}
      {block:SearchPage}<h3>{lang:Search results for SearchQuery}</h3><p>{lang:SearchResultCount results}</p>{block:NoSearchResults}<h3>{lang:No results found}</h3>{/block:NoSearchResults}{/block:SearchPage}
      <div class="divider"></div>
    </div>

      <div class="large-12 columns portfolio">

        {block:Posts}
        <article class="large-3 medium-6 columns">
          
           {block:Photo}
           <div id="portfolio-item" style="background-image: url('{PhotoURL-500}');">
        
                <div class="post-info">
                    <a href="{Permalink}" title="{lang:Permalink for this post}"></a>
                    {block:Caption}{Caption}<br>{/block:Caption}
                    {block:IfShowPostDate}{block:Date}<small>{lang:Posted on DayOfMonth Month Year}</small>{/block:Date}{/block:IfShowPostDate}
                </div>
            </div>
           {/block:Photo}

           {block:Photoset}
            <div id="portfolio-item" {block:Photos}style="background-image: url('{PhotoURL-500}');"{/block:Photos}> 

                <div class="post-info">
                    <a href="{Permalink}" class="post-info" title="{lang:Permalink for this post}"></a>
                    {block:Caption}{Caption}<br>{/block:Caption}
                    {block:IfShowPostDate}{block:Date}<small>{lang:Posted on DayOfMonth Month Year}</small>{/block:Date}{/block:IfShowPostDate}<br>
                    <small>{PhotoCount} {lang:Photos}</small>
                </div>
            </div>
           {/block:Photoset}

问题分析： #

1. 重复ID违反HTML规范：所有Photo和Photoset帖子都使用id="portfolio-item"，HTML要求ID必须唯一，重复ID会导致浏览器渲染逻辑混乱，干扰背景图片的加载解析。
2. Photoset标签嵌套错误：在Photoset的div属性中直接嵌套{block:Photos}，会生成多个style="background-image"属性，浏览器无法正确解析，导致图片地址失效。

修复方案： #

1. 替换重复ID为Class

将id="portfolio-item"改为class="portfolio-item"，class允许重复使用，避免标识冲突。

2. 修正Photoset背景图片逻辑

使用{FirstPhotoURL-500}获取Photoset的第一张图作为背景，确保style属性只输出一次，让浏览器能正确识别图片地址。

修改后的代码片段： #

<!-- start portfolio -->
<section class="page-section portfolio-wrap">

  <div class="row">
    <div class="text-center">
      <div {block:SearchPage}style="display: none;"{/block:SearchPage}{block:TagPage}style="display: none;"{/block:TagPage}>{block:IfPostAreaTitle}<h3>{text:Post Area Title}</h3>{/block:IfPostAreaTitle}</div>

      {block:TagPage}<h3>{lang:Posts tagged Tag}</h3>{/block:TagPage}
      {block:SearchPage}<h3>{lang:Search results for SearchQuery}</h3><p>{lang:SearchResultCount results}</p>{block:NoSearchResults}<h3>{lang:No results found}</h3>{/block:NoSearchResults}{/block:SearchPage}
      <div class="divider"></div>
    </div>

      <div class="large-12 columns portfolio">

        {block:Posts}
        <article class="large-3 medium-6 columns">
          
           {block:Photo}
           <div class="portfolio-item" style="background-image: url('{PhotoURL-500}');">
        
                <div class="post-info">
                    <a href="{Permalink}" title="{lang:Permalink for this post}"></a>
                    {block:Caption}{Caption}<br>{/block:Caption}
                    {block:IfShowPostDate}{block:Date}<small>{lang:Posted on DayOfMonth Month Year}</small>{/block:Date}{/block:IfShowPostDate}
                </div>
            </div>
           {/block:Photo}

           {block:Photoset}
            <div class="portfolio-item" style="background-image: url('{FirstPhotoURL-500}');"> 

                <div class="post-info">
                    <a href="{Permalink}" class="post-info" title="{lang:Permalink for this post}"></a>
                    {block:Caption}{Caption}<br>{/block:Caption}
                    {block:IfShowPostDate}{block:Date}<small>{lang:Posted on DayOfMonth Month Year}</small>{/block:Date}{/block:IfShowPostDate}<br>
                    <small>{PhotoCount} {lang:Photos}</small>
                </div>
            </div>
           {/block:Photoset}

内容的提问来源于stack exchange，提问作者Milica D. Mihajlović