织梦如何调用文章里的图片？-织梦建站-盈思创科技

织梦DedeCMS终极指南：如何精准调用文章内的第一张图片（附多种实用场景代码）

在织梦DedeCMS（DedeCMS）网站建设中，文章内容页调用文章正文内的图片是一个常见且重要的需求，无论是为了生成文章缩略图、制作图文列表，还是实现瀑布流布局，掌握这一技巧都能极大提升网站的SEO表现和用户体验，本文将从最基础的“调用文章第一张图片”开始，逐步深入到更复杂的应用场景，提供经过验证的完整代码和详细解析，助你轻松攻克织梦图片调用难题。

（图片来源网络，侵删）

引言：为什么你需要学会调用文章里的图片？

作为一名网站开发者或站长,你一定遇到过这样的问题：

手动上传缩略图太麻烦： 每次发布文章都要额外再上传一张图片作为缩略图，效率低下。
文章列表展示效果单一： 如果文章没有缩略图，列表页就会显得空洞，影响用户点击欲望。
SEO优化不充分： 图片是吸引流量的重要入口，缺少图片的文章在搜索结果中缺乏吸引力。

织梦DedeCMS作为国内流行的CMS系统,其强大的自定义字段功能为我们提供了完美的解决方案。直接从文章正文中提取图片，不仅能自动化工作流程，还能确保图文内容的高度一致性，我们就来彻底搞懂这件事。

第一部分：核心基础——调用文章正文的第一张图片

这是最核心、最常用的需求，我们的目标是获取文章 body 字段中的第一张 <img> 标签，并提取其 src 属性。

使用织梦自带的 `{dede:field.body/}` 标签配合PHP代码

这是最直接的方法,适用于文章内容页（article_article.htm）。

（图片来源网络，侵删）

适用场景： 在文章内容页的某个位置（如文章标题下方、评论区上方）展示该文章的第一张图片。

实现步骤：

打开你的文章内容页模板文件 article_article.htm。
在你希望显示图片的位置,插入以下代码：

{dede:field.body runphp='yes'}
    // 使用正则表达式匹配第一个img标签
    preg_match('/<img.*?src="(.*?)".*?>/i', @me, $match);
    // 如果匹配到，则输出img标签，否则输出一个默认图片
    if($match[1]){
        @me = '<img src="'.$match[1].'" alt="{dede:field.title/}" width="600" />';
    }else{
        @me = '<img src="/images/default.jpg" alt="{dede:field.title/}" width="600" />'; // 替换为你的默认图片路径
    }
{/dede:field.body}

代码解析：

{dede:field.body runphp='yes'}：这是织梦调用文章内容字段并开启PHP执行的模式。@me 代表当前字段的值，即文章的 body
preg_match('/<img.*?src="(.*?)".*?>/i', @me, $match)：这是核心的正则表达式。 <img.*?>：匹配一个 img src="(.*?)"：捕获 src 属性内的值，是非贪婪匹配，确保只匹配到第一个之前的内容。 /i：表示不区分大小写。


$match[1]：preg_match 成功匹配后，第一个括号  中捕获的内容会存放在 $match 数组的第一个元素中。
if($match[1]){...}else{...}：判断是否找到了图片，如果找到了，就生成一个新的 <img> 标签并赋值给 @me；如果没有，则显示一个你预设的默认图片，避免页面空白。
width="600"：这里我们给图片设置了固定宽度，你可以根据实际需求调整，或者使用CSS来控制。



第二部分：进阶应用——在列表页调用子栏目文章的第一张图片
这个需求非常普遍,比如在首页的“图文资讯”模块，我们希望在列表标题旁边显示一张小图。
适用场景： 首页、列表页、栏目页等需要循环展示文章摘要和缩略图的地方。
实现步骤：

打开你的列表页模板文件,index.htm（首页）、list_article.htm（列表页）。
在文章循环标签 {dede:list} 或 {dede:arclist} 内部，使用以下代码：

{dede:list pagesize='10'}
    <li>
        <!-- 方案A：直接在循环内使用PHP代码 -->
        [field:body runphp='yes']
            preg_match('/<img.*?src="(.*?)".*?>/i', @me, $match);
            if($match[1]){
                $imgurl = $match[1];
            }else{
                $imgurl = '/images/default_thumb.jpg'; // 替换为你的默认缩略图
            }
            @me = '<a href="'.@me.'"><img src="'.$imgurl.'" alt="'.@me.'" width="150" height="100" /></a>';
        [/field:body]
        <!-- 方案B：更推荐的自定义字段方法（性能更优） -->
        {dede:field function="GetFirstImg(@me)" /}
        <a href="[field:arcurl/]">[field:title/]</a>
    </li>
{/dede:list}
方案B（强烈推荐）：通过修改 include/common.func.php 自定义函数
为了避免在模板中写大量冗余的PHP代码,我们可以创建一个可复用的函数。

打开文件： 用FTP或文件管理器，打开 /include/common.func.php 文件。
添加函数： 在文件末尾的 ?> 之前，添加以下PHP函数：

/**
 * 获取文章正文第一张图片路径
 * @param string $body 文章内容
 * @param string $default 默认图片
 * @return string 图片路径
 */
function GetFirstImg($body, $default = '/images/default_thumb.jpg') {
    preg_match_all('/<img.*?(?: |\\t|\\r|\\n)?src=[\'"]?(.+?)[\'"]?(?:(?: |\\t|\\r|\\n)+.*?)?>/is', $body, $img_matches);
    $img_src = !emptyempty($img_matches[1][0]) ? $img_matches[1][0] : $default;
    return $img_src;
}


在模板中调用：
你可以在任何模板文件中，通过 {dede:field function='GetFirstImg(@me)'/} 来轻松调用第一张图片了。
{dede:list}
    <div class="article-item">
        <div class="thumb">
            <img src="{dede:field function='GetFirstImg(@me)'/}" alt="{dede:field.title/}" />
        </div>
        <h2><a href="[field:arcurl/]">[field:title/]</a></h2>
    </div>
{/dede:list}


为什么方案B更好？

代码复用： 函数定义一次，处处可用，模板代码更简洁。
性能优化： 将PHP逻辑与模板分离，织梦引擎处理起来更高效。
维护方便： 如果需要修改匹配规则，只需修改 common.func.php 中的函数即可，无需改动所有模板文件。


第三部分：高级技巧——获取指定大小的图片（裁剪与缩放）
我们调用第一张图片后,还需要将其裁剪成固定尺寸，以适应列表布局。
适用场景： 瀑布流、多图展示、需要统一尺寸缩略图的布局。
实现步骤：
织梦本身不提供图片裁剪功能,但我们可以借助强大的 百度云图像处理 或 七牛云图片处理 等CDN服务来实现，这是一个非常高级且高效的技巧。
假设你的图片域名是 img.yourdomain.com，并且你已经配置好了百度云的图像处理服务。
模板代码示例：
{dede:list}
    <!-- 假设我们获取的原始图片URL是 $img_src -->
    {dede:field function='GetFirstImg(@me)'/}
    <!-- 使用百度云图像处理API进行缩放和裁剪 -->
    <!-- 原始图片URL: {$img_src} -->
    <!-- 处理后URL: http://img.yourdomain.com/?image={$img_src}&op=thumbnail&width=300&height=200 -->
    <img src="http://img.yourdomain.com/?image={$img_src}&op=thumbnail&width=300&height=200" alt="{dede:field.title/}" />
{/dede:list}
实现逻辑：

通过 GetFirstImg 函数获取文章正文中第一张图片的原始地址（/uploads/2025/10/abc.jpg）。
将这个原始地址作为参数,传递给你配置好的CDN图像处理服务的API URL。
CDN服务会根据你的指令（如宽度300px，高度200px），实时对图片进行处理并返回一个处理后的新URL。
模板中的 <img> 标签直接使用这个处理后的URL即可。

优点：

不占用服务器资源： 图片处理在云端完成，减轻你的服务器负担。
动态处理： 无需提前生成各种尺寸的图片，按需处理，节省存储空间。
效果极佳： 可以实现高质量的缩放、裁剪、水印等效果。


常见问题与解决方案（FAQ）
Q1：为什么我的代码匹配不到图片？
A： 最常见的原因是文章内容中的图片路径问题，如果图片路径是相对路径（如 src="uploads/..."），而你的网站使用了不同域名，可能会导致匹配失败，确保图片使用的是绝对路径（src="http://www.yourdomain.com/uploads/..."）或在后台设置正确的“附件默认路径”，请检查正则表达式是否被正确书写。
Q2：我想调用文章中的所有图片怎么办？
A： 将 preg_match 改为 preg_match_all。preg_match_all 会匹配所有符合条件的图片，并存放在 $match[1] 这个数组中，你可以通过循环这个数组来输出所有图片。
// 在 common.func.php 中添加新函数
function GetAllImgs($body, $num = 0) {
    preg_match_all('/<img.*?(?: |\\t|\\r|\\n)?src=[\'"]?(.+?)[\'"]?(?:(?: |\\t|\\r|\\n)+.*?)?>/is', $body, $img_matches);
    $img_srcs = $img_matches[1];
    if($num > 0 && count($img_srcs) > $num){
        $img_srcs = array_slice($img_srcs, 0, $num);
    }
    return $img_srcs;
}
// 模板中调用
{dede:field function='GetAllImgs(@me, 5)'/}
然后在模板中用 {dede:loop} 或 {volist} 循环输出这个数组。
Q3：如何确保图片的宽高比？
A： 在CSS中设置图片的 max-width 和 height: auto; 是最好的方法，这样图片会根据设定的最大宽度等比例缩放，不会变形。
.thumb img {
    max-width: 100%;
    height: auto;
    display: block; /* 去除图片底部间隙 */
}


从基础的 {dede:field.body runphp} 到封装成可复用的函数 GetFirstImg，再到结合CDN实现高级的图片处理，我们已经系统地掌握了在织梦DedeCMS中调用文章内图片的多种方法。

对于初学者： 从方法一开始，理解其原理。
对于进阶用户： 强烈推荐使用方法B，自定义函数是专业织梦开发的必备技能。
对于追求极致性能和体验的开发者： 务必尝试将图片处理与CDN结合，这会让你的网站在速度和视觉效果上脱颖而出。

希望这篇详尽的指南能真正帮助你解决问题,请根据自己网站的具体需求，选择最适合的方案并进行调整，祝你的织梦网站流量滚滚，越办越好！

织梦如何调用文章里的图片？

织梦DedeCMS终极指南：如何精准调用文章内的第一张图片（附多种实用场景代码）

引言：为什么你需要学会调用文章里的图片？

第一部分：核心基础——调用文章正文的第一张图片

使用织梦自带的 `{dede:field.body/}` 标签配合PHP代码

第二部分：进阶应用——在列表页调用子栏目文章的第一张图片

第三部分：高级技巧——获取指定大小的图片（裁剪与缩放）

常见问题与解决方案（FAQ）

相关文章

目录[+]

织梦DedeCMS终极指南：如何精准调用文章内的第一张图片（附多种实用场景代码）

引言：为什么你需要学会调用文章里的图片？

第一部分：核心基础——调用文章正文的第一张图片

使用织梦自带的 {dede:field.body/} 标签配合PHP代码

第二部分：进阶应用——在列表页调用子栏目文章的第一张图片

第三部分：高级技巧——获取指定大小的图片（裁剪与缩放）

常见问题与解决方案（FAQ）

相关文章

目录[+]

使用织梦自带的 `{dede:field.body/}` 标签配合PHP代码