织梦文章图片如何调用？

织梦提供了两个核心函数来实现这个功能：

1. GetOneImgUrl($body, $num): 专门用于获取文章内容中的第一张图片的地址。
2. GetAllImgUrls($body): 用于获取文章内容中的所有图片地址的数组。

这两个函数都位于 /include/helpers/extend.helper.php 文件中，如果你的系统无法使用这些函数,请首先检查这个文件是否存在。

调用文章中的第一张图片（最常用）

这是最常见的需求,用于在列表页展示文章的缩略图。

场景：在文章列表页（如 list_article.htm）调用

假设你的文章列表循环代码是这样的：

{dede:list pagesize='10'}
    <li>
        <a href="[field:arcurl/]">[field:title/]</a>
        <span>[field:pubdate function="MyDate('Y-m-d',@me)"/]</span>
    </li>
{/dede:list}

现在你想在每条文章后面加上第一张图片,修改如下：

{dede:list pagesize='10'}
    <li>
        <a href="[field:arcurl/]">[field:title/]</a>
        <span>[field:pubdate function="MyDate('Y-m-d',@me)"/]</span>
        <!-- 在这里添加调用第一张图片的代码 -->
        [field:body function='GetOneImgUrl(@me, 0)'/]
        <!-- 上面的代码会直接输出图片的完整地址，http://www.yoursite.com/uploads/xxx.jpg -->
        <!-- 我们可以用它作为 <img> 标签的 src 属性 -->
        <img src="[field:body function='GetOneImgUrl(@me, 0)'/]" alt="[field:title/]" width="100" />
    </li>
{/dede:list}

代码解析：

• [field:body function='GetOneImgUrl(@me, 0)'/] 是核心代码。
  • field:body: 获取文章内容的 body 字段。
  • function='...': 声明要对这个字段使用一个PHP函数进行处理。
  • GetOneImgUrl(@me, 0): 调用 GetOneImgUrl 函数。
    • @me: 这是织梦模板中的固定写法，代表当前字段的值，也就是 body 的内容。
    • 0: 代表获取第几张图片，0 代表第一张，1 代表第二张，以此类推，通常我们只需要第一张，所以用 0。

优化：如果文章没有图片怎么办？

直接调用的话，如果文章没有图片，GetOneImgUrl 会返回一个默认的 "无图片" 地址（通常是 /images/defaultpic.gif），如果你想在没有图片时不显示任何东西，可以使用 {dede:if} 条件判断。

{dede:list pagesize='10'}
    <li>
        <a href="[field:arcurl/]">[field:title/]</a>
        <span>[field:pubdate function="MyDate('Y-m-d',@me)"/]</span>
        <!-- 使用条件判断，如果图片地址不是默认的 "无图片" 地址，则显示 -->
        {dede:if getimg='1'}
            <img src="[field:body function='GetOneImgUrl(@me, 0)'/]" alt="[field:title/]" width="100" />
        {/dede:if}
    </li>
{/dede:list}

提示：{dede:if getimg='1'} 是一个更简洁的判断方式，它会检查文章是否存在图片，如果存在，则执行 {dede:if} 和 {/dede:if} 之间的内容。

调用文章中的所有图片

如果你想在文章详情页或特定页面，以画廊形式展示文章内的所有图片，可以使用 GetAllImgUrls 函数。

场景：在文章详情页（如 article_article.htm）调用所有图片

在文章详情页,你可以在文章内容上方或下方添加一个图片集。

{dede:field.body/}
<!-- 在这里添加调用所有图片的代码 -->
<div class="article-gallery">
    <h3>文章图片</h3>
    <ul>
        {dede:getallimgurls function='GetAllImgUrls(@me)'}
            <li>
                <!-- 这里的 [field:text/] 是图片的 alt 文本，[field:value/] 是图片地址 -->
                <img src="[field:value/]" alt="[field:text/]" />
            </li>
        {/dede:getallimgurls}
    </ul>
</div>

代码解析：

• {dede:getallimgurls function='GetAllImgUrls(@me)'/}: 这是一个自定义的循环标签，用于遍历 GetAllImgUrls 函数返回的数组。
• [field:value/]: 在这个循环标签内,代表当前循环到的图片的完整URL地址。
• [field:text/]: 代表当前图片的 alt 文本（如果图片标签中有的话）。

使用正则表达式（更灵活、更强大）

GetOneImgUrl 和 GetAllImgUrls 函数虽然方便，但有时不够灵活，比如你想获取图片的特定属性（如 data-original 用于懒加载），或者想对图片进行更复杂的处理，这时,直接使用PHP的正则表达式会更强大。

场景：获取第一张图片的 data-original 属性值（用于懒加载）

{dede:list pagesize='10'}
    <li>
        <a href="[field:arcurl/]">[field:title/]</a>
        <!-- 使用PHP代码块和正则表达式 -->
        [field:body runphp='yes']
            // 使用正则表达式匹配 <img> 标签，并捕获 src 和 data-original 属性
            $pattern = '/<img\s[^>]*?src\s*=\s*[\'|\"](.*?)[\'|\"].*?data-original\s*=\s*[\'|\"](.*?)[\'|\"].*?[\/]?>/i';
            preg_match_all($pattern, @me, $matches);
            // 如果找到了图片
            if(isset($matches[2][0]) && !empty($matches[2][0])) {
                // 输出 data-original 的值
                @me = $matches[2][0];
            } else {
                // 如果没有找到，可以输出一个默认图片或留空
                @me = '/images/defaultpic.gif';
            }
        [/field:body]
        <img src="[field:body function='GetOneImgUrl(@me, 0)'/]" data-src="{@me}" alt="[field:title/]" class="lazy-load" width="100" />
    </li>
{/dede:list}

代码解析：

1. [field:body runphp='yes']: 这表示对 body 字段执行PHP代码，并将最终结果（@me 的值）输出到模板。
2. $pattern: 这是一个正则表达式，它会查找一个 <img> 标签，并特别关注 src 和 data-original 这两个属性。 是非贪婪匹配，[\'|\"] 匹配单引号或双引号。
3. preg_match_all(): 执行正则匹配，将结果存入 $matches 数组。
   • $matches[0] 存储的是所有匹配到的完整 <img>
   • $matches[1] 存储的是所有匹配到的 src 属性的值。
   • $matches[2] 存储的是所有匹配到的 data-original 属性的值。
4. if(isset($matches[2][0]) ...): 判断是否找到了至少一张带有 data-original 属性的图片。
5. @me = $matches[2][0];: 如果找到了，就将 data-original 的值赋给 @me,这个值就会被输出到模板中。
6. <img data-src="{@me}" ...>: 在模板中，我们使用 {@me} 来接收这个PHP代码块处理后的结果，并将其作为 data-src 的值,实现懒加载。