dede调用文章首图不显示怎么办?

99ANYc3cd6
预计阅读时长 18 分钟
位置: 首页 DEDE建站 正文

下面我将从原因分析多种解决方案,再到常见问题排查,为你详细讲解如何解决这个问题。

dede 调用文章第一张图片不显示
(图片来源网络,侵删)

问题原因分析

我们要明白DedeCMS是如何“调用第一张图片”的,它并不是真的去解析图片,而是通过一个简单的正则表达式在文章的body字段中查找第一个<img>

不显示主要有以下几个原因:

  1. 文章中没有图片:最常见的原因,文章内容里压根就没有插入<img>
  2. 被过滤中可能包含了<img>标签,但在保存或调用时,被某种机制(如编辑器安全过滤、自定义模型字段过滤等)给移除了。
  3. 调用代码错误:使用的标签语法不正确,或者标签所在的PHP环境没有正确配置。
  4. 图片路径问题:找到的img标签,但其src属性是相对路径(如 /uploads/xxx.jpg),在当前页面下无法正确解析。
  5. 图片被外部引用:第一张图片是引用的外部链接(如 <img src="http://other.com/1.jpg">),但你的网站配置或安全策略阻止了加载外部图片。

解决方案(从易到难)

你可以根据自己的情况,尝试以下一种或多种方法。

使用官方提供的标准标签(最推荐)

这是最简单、最稳定的方法,适用于DedeCMS默认的编辑器(如FCKeditor、百度编辑器等)。

标签语法:

dede 调用文章第一张图片不显示
(图片来源网络,侵删)
{dede:field name='body' function='GetOneImgUrl(@me, 1)'/}

参数说明:

  • function='GetOneImgUrl(@me, 1)':这是核心。
    • @me:代表当前字段的值,也就是文章的body
    • GetOneImgUrl:这是DedeCMS内置的一个函数,专门用于提取第一张图片。
    • 1:表示如果找到图片,则返回图片的完整URL,如果设置为0,则返回<img>标签本身。

使用示例(获取第一张图片并显示为缩略图):

{dede:arclist row='1' titlelen='30'}
    <div class="article-thumb">
        {dede:field name='body' function='GetOneImgUrl(@me, 1)'/}
    </div>
    <h2><a href="[field:arcurl/]">[field:title/]</a></h2>
{/dede:arclist}

如果这个方法不生效,请继续看下面的方案。

手动编写PHP代码(最灵活)

如果你对PHP有一定了解,或者官方标签无法满足你的需求(比如你想自定义图片大小),可以直接在模板里写PHP代码。

dede 调用文章第一张图片不显示
(图片来源网络,侵删)

操作步骤:

  1. 在DedeCMS后台,进入“模板” -> “默认模板管理”。
  2. 找到你需要修改的模板文件(如 list_article.htm),点击“修改”。
  3. 在你希望显示图片的地方,将代码切换到“代码”模式,然后粘贴以下代码:
<?php
    $body = $arcFields['body']; // 获取文章内容
    $preg = "/<img.*?src=[\\'|\"](.*?)[\\'|\"].*?[\/]?>/i"; // 匹配img标签的正则
    preg_match_all($preg, $body, $match);
    if(isset($match[1]) && !empty($match[1])) {
        // $match[1] 是一个包含所有图片src的数组,取第一个
        $imgsrc = $match[1][0];
        // 为了确保路径完整,可以加上你的域名
        // $imgsrc = 'http://你的域名.com' . $imgsrc;
        echo "<img src='".$imgsrc."' alt='文章首图' />";
    } else {
        // 如果没有图片,可以显示一个默认图片
        echo "<img src='/images/default.jpg' alt='默认图片' />";
    }
?>

代码解释:

  • preg_match_all($preg, $body, $match);:在文章内容中查找所有符合<img src="...">模式的字符串。
  • isset($match[1]) && !empty($match[1]):判断是否找到了图片。$match[1]存储了所有src的值。
  • $match[1][0]:获取第一个图片的src地址。
  • echo "<img ... />";:输出图片标签。
  • else部分:非常重要!当文章没有图片时,显示一张你准备好的默认图片,避免页面空白或布局错乱。

使用自定义函数(适用于复杂需求)

如果你想在多个地方都调用这个功能,或者需要更复杂的逻辑(比如图片裁剪),可以自定义一个函数。

操作步骤:

  1. 创建函数文件
    • 打开 /include/helpers/ 目录下的 extend.helper.php 文件。
    • 如果这个文件不存在,就新建一个。
    • 在文件末尾添加如下PHP函数:
/**
 * 获取文章第一张图片地址
 * @param string $body 文章内容
 * @param string $default 默认图片地址
 * @return string 图片地址
 */
function GetFirstImg($body, $default = '') {
    $preg = "/<img.*?src=[\\'|\"](.*?)[\\'|\"].*?[\/]?>/i";
    preg_match_all($preg, $body, $match);
    if(isset($match[1]) && !empty($match[1])) {
        return $match[1][0];
    }
    return $default;
}
  1. 在模板中调用

    现在你可以在任何模板文件中使用这个自定义函数了。

{dede:arclist row='1' titlelen='30'}
    <div class="article-thumb">
        <?php
            $first_img = GetFirstImg($arcFields['body'], '/images/default.jpg');
            echo "<img src='".$first_img."' alt='文章首图' />";
        ?>
    </div>
    <h2><a href="[field:arcurl/]">[field:title/]</a></h2>
{/dede:arclist}

这种方法代码更整洁,复用性更强。


常见问题排查清单

如果以上方法都试过了还是不行,请检查以下几点:

  1. 检查文章内容

    • 进入后台,找到对应文章,切换到“代码”视图,确认<img>标签确实存在,并且没有被任何特殊字符(如&nbsp;)干扰。
    • 确认图片路径是正确的,<img src="/uploads/allimg/230510/1-2305101H319.jpg" ... />
  2. 检查标签是否在循环内

    • {dede:field name='body'...} 这个标签必须{dede:arclist}{dede:list} 等循环标签的内部使用,因为它依赖于循环变量 $arcFields,如果直接在首页模板(如 index.htm)里使用,会报错或无法获取数据。
  3. 检查PHP环境

    • 确保你的模板文件后缀是 .php,并且网站环境支持PHP代码执行,在DedeCMS后台,系统 -> 系统基本参数 -> 核心设置,确认“是否启用多级栏目”等选项是否正确,但这通常不影响PHP执行。
    • 如果使用方案二或三,确保你的PHP代码没有语法错误。
  4. 检查图片路径问题

    • 如果获取到的图片路径是 /uploads/xxx.jpg,但你的网站部署在子目录(如 http://www.example.com/dede/),那么这个路径就会失效。
    • 解决方案:在获取到图片路径后,手动加上你的域名,修改方案二或三的代码:
      // 在获取到$imgsrc后
      if(strpos($imgsrc, 'http') === false) {
          $imgsrc = 'http://你的域名.com' . $imgsrc;
      }
      echo "<img src='".$imgsrc."' ... />";
  5. 检查编辑器过滤规则

    • 进入后台“系统” -> “系统基本参数” -> “核心设置”,检查“Html编辑器”和“自动提取远程图片”等选项。
    • 如果使用了自定义模型,检查该模型的内容字段(通常是body),在“字段管理”中,确保其“处理类型”不是“仅文本”,并且没有勾选会过滤掉<img>标签的选项。
场景 推荐方案 优点 缺点
快速解决,常规使用 官方标签 简单、稳定、无需编程 灵活性差
需要自定义样式或逻辑 内联PHP代码 灵活、可控 代码冗余,不易复用
多处调用,追求代码整洁 自定义函数 代码复用性高,逻辑清晰 需要修改核心文件

建议排查顺序:

  1. 先用方案一,如果不行,检查问题排查清单
  2. 如果问题排查后仍无法解决,使用方案二方案三,并结合排查清单中的路径、内容检查。

希望这些详细的步骤能帮你解决问题!

-- 展开阅读全文 --
头像
Linux、Windows、C语言如何协同开发?
« 上一篇 12-13
织梦background url如何正确设置路径?
下一篇 » 12-13

相关文章

取消
微信二维码
支付宝二维码