dede调用文章首图不显示，怎么解决？

下面我将从最常见的原因到其他可能性，为你提供一个全面且可操作的排查和解决方案指南。

问题根源分析

想象一下调用图片的过程：文章内容 -> 提取标签 -> 赋值给变量 -> 模板输出，任何一个环节出错，最终都会导致“不显示”。

使用系统自带的 {dede:field.body/} 标签（最推荐）

这是最简单、最稳定的方法，因为它直接调用文章正文内容，让DedeCMS自己处理图片的提取。

操作步骤：

1. 找到你调用文章的列表模板文件,通常是 templets/default/list_*.htm (list_article.htm)。

2. 找到循环文章内容的部分,它通常是这样的结构：

   
   （图片来源网络，侵删）

   {dede:list pagesize='10'}
   <li>
       <!-- 这里是文章的其他信息，如标题、时间等 -->
       <a href="[field:arcurl/]">[field:title/]</a>
       <!-- 在这里插入调用第一张图片的代码 -->
       <div class="list-img">
           {dede:field.body/}
       </div>
       <!-- -->
       <p>[field:description function='cn_substr(@me,100)'/]...</p>
   </li>
   {/dede:list}

3. 关键步骤：上面的 {dede:field.body/} 会输出整篇文章的内容，这显然不是我们想要的，我们需要用 CSS 来隐藏其他所有内容，只保留第一张图片。

4. 在你的CSS文件（/templets/default/style/ 目录下的 css 文件）中，添加以下样式：

   /* 用于调用文章第一张图片的容器样式 */
   .list-img {
       width: 200px; /* 设置你想要的图片宽度 */
       height: 150px; /* 设置高度 */
       overflow: hidden; /* 隐藏超出部分 */
       float: left; /* 或其他布局方式 */
       margin-right: 10px;
   }
   /* 这是核心！隐藏除了img标签之外的所有内容 */
   .list-img * {
       display: none;
   }
   /* 只显示img标签，并设置其样式 */
   .list-img img {
       display: block !important; /* 强制显示 */
       width: 100%; /* 让图片宽度100%填充容器 */
       height: auto; /* 高度自适应，保持比例 */
       object-fit: cover; /* 让图片覆盖整个容器，多余部分裁剪 */
   }

优点：

• 简单可靠：无需修改任何PHP代码，不受版本升级影响。
• 自动处理：无论图片是 <img src="..."> 还是 <img data-src="...">（Lazy Load懒加载），只要是正文里的第一张图，都能被正确识别和显示。

缺点：

• CSS依赖：需要配合正确的CSS才能生效。

使用自定义函数 GetFirstImg()（灵活但需修改文件）

如果你的模板非常复杂,或者不想用CSS去“隐藏”其他内容，可以创建一个自定义函数来精确获取第一张图片的地址。

操作步骤：

1. 创建自定义函数文件

   • 打开 /include/helpers/extend.helper.php 文件，如果这个文件不存在，就新建一个。
   • 在文件末尾 ?> 的前面，添加以下PHP函数代码：

     /**

   • 获取文章body中的第一张图片路径
   • @param string $body 文章内容
   • @return string 图片路径，如果没有则返回默认图片 / if ( ! function_exists('GetFirstImg')) { function GetFirstImg($body) { // 匹配所有img标签 $pattern = "/<img\s.?src\s=\s\"|\'[\"|'].*?>/i"; preg_match_all($pattern, $body, $matches); if (isset($matches[1][0])) { // 如果找到了图片，返回第一张的src return $matches[1][0]; } else { // 如果没有找到图片，返回一个默认图片地址（请确保此图片存在） // 可以使用绝对路径，如 /templets/default/images/default.jpg return '/templets/default/images/nopic.jpg'; } } }

2. 在模板中调用该函数

   • 打开你的列表模板文件（如 list_article.htm）。

   • 在你需要显示图片的地方,使用 {dede:field.function} 来调用这个自定义函数。

     {dede:list pagesize='10'}
     <li>
     <a href="[field:arcurl/]">[field:title/]</a>
     <!-- 调用自定义函数获取第一张图并显示 -->
     <div class="list-img">
         <img src="{dede:field.body function='GetFirstImg(@me)'/}" alt="[field:title/]" />
     </div>
     <p>[field:description function='cn_substr(@me,100)'/]...</p>
     </li>
     {/dede:list}

3. （可选）处理Lazy Load懒加载图片

   • 现在很多网站为了优化性能,图片使用 data-src 而不是 src，上面的函数默认只匹配 src。
   • 修改函数以支持 data-src：

     // 修改正则表达式，使其同时匹配 src 和 data-src
     $pattern = "/<img\s.*?(src|data-src)\s*=\s*[\"|\'](.*?)[\"|'].*?>/i";
     // ... 后续代码不变

优点：

• 代码清晰：直接获取图片地址，逻辑明确。
• 灵活性高：可以轻松扩展函数功能，比如添加图片裁剪、缩放等。

缺点：

• 需要修改文件：涉及PHP文件操作，对新手有一定门槛。
• 可能被覆盖：如果未来升级DedeCMS，extend.helper.php 可能会被覆盖，需要重新添加。

检查和修改DedeCMS系统设置

问题出在DedeCMS本身的配置上。

1. 检查文章内容中的图片路径

   • 进入后台,随便打开一篇文章，查看编辑器里的图片代码，图片路径是相对路径（如 uploads/images/2025/10/01/a.jpg）还是绝对路径（如 http://www.yoursite.com/uploads/images/...）？
   • 如果是相对路径,确保你的模板中已经正确设置了 {dede:global.cfg_basehost/} 来拼接完整URL，在 <img> 标签中，最好使用完整路径。

2. 检查附件是否关联

   • 在发布文章时,插入的图片是通过“上传图片”按钮上传的，还是从“媒体库”选择的？
   • 确保图片已经与文章正确关联,有时不正确的操作会导致图片路径丢失。

排查清单：如果还是不显示，请检查以下几点

1. 浏览器开发者工具（F12）

   • 按F12打开开发者工具,切换到 "Elements" (元素) 标签。
   • 找到你的 <img> 标签，看看它的 src 属性值是什么。
   • src 是空的：说明标签没有被正确赋值，问题出在模板调用或函数上，请检查你的 {dede:field.*} 标签或自定义函数。
   • src 有一个值，但图片显示不出来：
     • 将鼠标悬停在 src 的值上，右键选择 "Open link in new tab" (在新标签页中打开链接)。
     • 如果能正常打开图片,说明是CSS样式问题（display: none 或尺寸为0）。
     • 如果打不开（显示404 Not Found），说明图片路径错误或图片文件已丢失，请检查文章里的原始图片路径是否正确。

2. 本身

   • 直接去文章正文里确认,是否真的存在 <img>？有时候文章里只有一张被其他标签包裹的图片，或者根本就没有图。

3. 模板缓存

   • 有时候修改了模板文件但看不到效果,是因为DedeCMS开启了模板缓存。
   • 登录DedeCMS后台 -> 系统 -> 系统基本参数 -> 性能选项 -> 将“模板缓存”选项关闭，然后保存，刷新页面看看效果。