{dede:field.imgurls/}标签如何调用多张图片？

这是一个非常核心和实用的标签，主要用于调用文章内容中上传的图片集。

标签的基本功能

{dede:field.imgurls/} 的主要作用是获取当前文章在后台编辑时，通过“图片集”功能上传的所有图片,并以列表的形式输出出来。

重要前提： 这个标签只对文章模型为“图片集”的文章有效，如果你的文章是普通文章（如文章、软件下载等），即使你插入了图片,这个标签也无法调用出图片列表。

标签的底层工作原理

要理解如何使用这个标签,最好先了解它在数据库中是如何存储的。

1. 文章附加表 (dede_addonarticle)：文章的主要内容（如正文）存储在这里。
2. 图片集数据表 (dede_archives)：文章的基本信息（标题、发布时间等）存储在这里。
3. 图片集图片表 (dede_albumimg)：这才是关键！ 当你为一篇“图片集”文章上传图片时，图片的路径、标题等信息，会被一条一条地插入到 dede_albumimg 这张表中，并且通过 aid（文章ID）与文章关联起来。

{dede:field.imgurls/} 标签的底层逻辑就是：

1. 获取当前文章的ID (aid)。
2. 根据 aid 去 dede_albumimg 表中查询出所有相关的图片记录。
3. 将这些记录循环输出。

如何使用 {dede:field.imgurls/}

这个标签通常需要结合循环标签 {dede:list} 或 {dede:loop} 来使用,以便遍历出所有的图片。

基础用法（循环输出所有图片）

这是最常见的用法,它会依次输出图片集中每一张图片的地址。

{dede:field.imgurls}
    <img src="[field:imgsrc/]" alt="[field:text/]" />
{/dede:field.imgurls}

解析：

• {dede:field.imgurls}：开始循环,遍历图片集中的所有图片。
• [field:imgsrc/]：调用当前循环图片的图片路径,这是最常用的字段。
• [field:text/]：调用当前循环图片的图片说明/标题（在后台上传图片时可以填写）。
• </img>：HTML图片标签。

带有样式的用法（制作图片轮播或缩略图列表）

在实际应用中，我们通常会给图片加上样式,或者只调用缩略图。

<!-- 示例：制作一个图片列表，带边框和间距 -->
<div class="image-gallery">
    {dede:field.imgurls}
        <a href="[field:imgsrc/]" data-lightbox="gallery">
            <img src="[field:imgsrc/]" alt="[field:text/]" class="thumbnail" />
        </a>
    {dede:field.imgurls}
</div>
<style>
    .image-gallery { display: flex; gap: 10px; }
    .thumbnail { width: 150px; height: 150px; object-fit: cover; border: 1px solid #ccc; }
</style>

注意： 这里直接使用了 [field:imgsrc/] 作为 <img> 的 src，如果你的图片上传时自动生成了缩略图，并且你希望调用缩略图,你可能需要修改标签或使用自定义函数。

可用的底层字段（Field）

在 {dede:field.imgurls/} 循环内部,你可以使用以下字段来获取图片的不同信息：

进阶用法：获取第一张图片作为封面图

在很多场景下，我们只需要图片集的第一张图片作为文章的封面或缩略图，这时，就不能用循环了，需要使用 {dede:field name='imgurls' function='str_replace(@me, "/uploads/", "/uploads/small/")'/} 这种方式,但更推荐使用织梦的自定义函数。

使用 array_slice 函数（推荐）

在模板文件中，你可以使用PHP函数来处理 imgurls 字段。

{dede:field name='imgurls' function='array_slice(@me, 0, 1)'/}

这个函数的意思是：从 imgurls 字段的结果（一个数组）中，从索引0开始，只取1个元素,也就是第一张图片。

这个返回的是一个数组，我们需要进一步提取 imgsrc,更完整的写法是：

{dede:field name='imgurls' function='(is_array(@me) && count(@me)>0) ? @me[0]["imgsrc"] : ""'/}

这个代码可以这样理解：

1. is_array(@me) && count(@me)>0：判断 @me（即imgurls的值）是否是一个非空数组。
2. ? @me[0]["imgsrc"]：如果是，就取数组的第一个元素（@me[0]），然后从中获取 imgsrc 键对应的值。
3. 如果不是（比如没有上传图片）,就返回一个空字符串。

最终使用：

<!-- 如果文章是图片集，则显示第一张图作为封面 -->
{dede:field name='imgurls' function='(is_array(@me) && count(@me)>0) ? @me[0]["imgsrc"] : ""'/}

你可以把它直接放在 <img> 标签的 src 属性里。

使用自定义函数（更规范）

在 /include/extend.func.php 文件中添加一个自定义函数：

// 获取文章第一张图片路径
function GetFirstImg($imgurls) {
    if (empty($imgurls)) {
        return '';
    }
    $dtp = new DedeTagParse();
    $dtp->LoadSource($imgurls);
    if (is_array($dtp->CTags)) {
        foreach ($dtp->CTags as $ctag) {
            if ($cttag->GetName() == 'img') {
                return $ctag->GetAtt('imgsrc');
            }
        }
    }
    return '';
}

然后在模板中调用：

{dede:field name='imgurls' function='GetFirstImg(@me)'/}

常见问题与解决方案

问题1：标签没有输出任何内容。

• 原因：最常见的原因是文章模型不是“图片集”，请检查后台编辑该文章时，选择的模型是否为“图片集”。
• 解决：更改文章模型为“图片集”,并确保已经上传了图片。

问题2：我想调用缩略图，而不是原图。

• 原因：[field:imgsrc/] 默认调用的是原图。
• 解决：
  1. 在后台上传图片时，确保开启了“生成缩略图”功能。
  2. 修改标签，手动在路径中加入缩略图目录（如 /uploads/small/），但这不推荐,因为路径可能不固定。
  3. 使用自定义函数,根据原图路径自动生成缩略图路径。

问题3：如何实现图片轮播（Swiper）效果？

• 解决：你需要结合 {dede:field.imgurls/} 循环输出结构化的HTML，然后引入轮播图插件（如 Swiper）的JS和CSS。

<!-- HTML 结构 -->
<div class="swiper mySwiper">
    <div class="swiper-wrapper">
        {dede:field.imgurls}
            <div class="swiper-slide">
                <img src="[field:imgsrc/]" alt="[field:text/]">
            </div>
        {/dede:field.imgurls}
    </div>
    <div class="swiper-pagination"></div>
</div>
<!-- 引入 Swiper 的 CSS 和 JS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css"/>
<script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>
<!-- 初始化 Swiper -->
<script>
    var swiper = new Swiper(".mySwiper", {
        pagination: {
            el: ".swiper-pagination",
        },
    });
</script>

{dede:field.imgurls/} 是织梦CMS处理图片集内容的利器,记住它的核心要点：

**仅用于“图片集”模型