下面我将为你详细讲解几种常用的调用方法,从最简单到最灵活，并附上代码示例。
核心概念
-
图集字段：在后台添加图集时，通常使用
imgurls这个字段名（当然你也可以自定义），这个字段里存储的不是简单的图片路径，而是一个结构化的数据，类似这样：[ { "imgsrc": "/uploads/20251027/1.jpg", "text": "第一张图片描述" }, { "imgsrc": "/uploads/20251027/2.jpg", "text": "第二张图片描述" } ] -
解析函数：织梦提供了
GetImgUrl函数来从这种JSON结构中提取出图片地址。- 语法：
{dede:field name='imgurls' function='GetImgUrl(@me)'/} - 作用：这个标签会遍历
imgurls字段中的所有图片，并输出它们的完整路径（imgsrc的值）。
- 语法：
调用图集的第一张图片作为缩略图（最常用）
这是最常见的需求,比如在列表页显示文章时，用图集的第一张图作为文章的默认缩略图。
使用场景：列表页（list_article.htm）、文章内容页（article_article.htm）等。
代码示例：
{dede:list}
<li>
<!--
1. field.name='imgurls' 指定要解析的字段。
2. function='GetImgUrl(@me)' 调用函数解析出所有图片路径。
3. [field:global name=autoindex/] 是一个循环变量，第一次循环时值为1。
4. [field:text/] 是图片的描述。
-->
<img src="{dede:field name='imgurls' function='GetImgUrl(@me)'/}" alt="[field:text/]" />
<a href="[field:arcurl/]">[field:title/]</a>
</li>
{/dede:list}
代码解释：
{dede:field name='imgurls' function='GetImgUrl(@me)'/}：这个标签在{dede:list}循环内部，会为每一篇文章执行一次，它解析出该文章图集中的所有图片地址。[field:global name=autoindex/]：这是一个非常关键的技巧，在列表循环中，autoindex会从1开始自动递增，我们通过[field:global name=autoindex/] == 1这样的判断，来确保只取第一张图片。[field:text/]：获取当前循环到的图片的描述文字，作为img标签的alt属性，这有利于SEO。
更简洁的写法（直接取第一张）：
织梦的 GetImgUrl 函数可以直接指定索引来获取单张图片，索引从0开始。
{dede:list}
<li>
<!--
function='GetImgUrl(@me, 0)' 表示获取图集中的第一张图片（索引为0）。
text='获取第一张图片的描述' 可以手动指定或留空。
-->
<img src="{dede:field name='imgurls' function='GetImgUrl(@me, 0)'/}" alt="[field:title/]" />
<a href="[field:arcurl/]">[field:title/]</a>
</li>
{/dede:list}
这种写法更直接,推荐使用。
调用图集中的所有图片缩略图
如果你想在文章页或自定义页面,一次性展示图集里的所有缩略图，可以使用 使用场景页、自定义图集展示页。 代码示例： 代码解释： 这是织梦图集功能的经典实现,点击缩略图可以弹出大图并支持左右切换。 使用场景页（ 代码示例： 织梦默认的文章页模板已经集成了这个功能,你只需要确保你的模板文件里有如下代码即可： 代码解释： Q1: 为什么我调用出来的图片地址是错误的，或者显示不出来？ Q2: 我想给调用的图片加上固定的宽高，怎么做？ 直接在 Q3: 我想调用图集的第二张、第三张图片怎么办？ 使用 希望这些详细的解释和示例能帮助你顺利地在织梦中调用图集缩略图！{dede:img}
{dede:field name='imgurls' function='GetImgUrl(@me)'}
<a href="[field:imgsrc/]" target="_blank">
<img src="[field:imgsrc/]" alt="[field:text/]" width="100" />
</a>
{/dede:field}
{dede:field name='imgurls' function='GetImgUrl(@me)'/}：这个标签本身就会循环遍历图集里的每一张图片。[field:imgsrc/]：在 {dede:field} 循环内部，这个变量代表当前循环到的图片的地址。[field:text/]：代表当前图片的描述。
调用图集并实现点击放大（经典图集调用）
article_article.htm）。<!-- 图集部分 -->
<div class="picBox">
<ul class="pic">
{dede:field name='imgurls' function='GetImgUrl(@me)'}
<li>
<a href="[field:imgsrc/]" target="_blank">
<img src="[field:imgsrc/]" alt="[field:text/]" width="120" height="90" />
</a>
</li>
{/dede:field}
</ul>
</div>
<!-- JS部分，用于实现放大效果，通常放在页面底部 -->
<script type="text/javascript">
$(function(){
$(".picBox .pic a").jqZoom({ //jqZoom是织梦常用的一个放大镜插件
zoomWidth: 300,
zoomHeight: 300,
xOffset: 10,
yOffset: -10,
position: "right"
});
});
</script>
jqZoom 或其他图片灯箱插件来实现点击放大的交互效果。jqzoom.pack.js 和 jqzoom.css）。
常见问题与解决方案 (FAQ)
name='imgurls' 与你在后台添加的字段名一致，如果不是 imgurls，请修改成你自己的字段名。<img> 标签里添加 width 和 height 属性即可，如：
<img src="..." width="200" height="150" alt="..." />GetImgUrl 函数的索引功能，索引从 0 开始，所以第二张图片的索引是 1。<!-- 调用第二张图片 -->
<img src="{dede:field name='imgurls' function='GetImgUrl(@me, 1)'/}" alt="第二张图" />
<!-- 调用第三张图片 -->
<img src="{dede:field name='imgurls' function='GetImgUrl(@me, 2)'/}" alt="第三张图" />
调用需求
推荐代码
适用场景
取第一张图作缩略图
{dede:field name='imgurls' function='GetImgUrl(@me, 0)'/}列表页、内容页
循环显示所有缩略图
{dede:field name='imgurls' function='GetImgUrl(@me)'}...{/dede:field}内容页、图集展示页
经典图集调用（带放大）
结合HTML和JS插件（如jqZoom）
内容页
