这个标签主要用于产品图集或图集模型中，用来循环输出一个图集内的所有图片列表，它和arclist（文章列表）、list（栏目列表）一样，是织梦非常核心和常用的一个循环标签。
（图片来源网络，侵删）
productimagelist标签的基本用法
这个标签通常用在图集内容的模板文件中,article_product.htm。
基本语法格式：
{dede:productimagelist}
<!-- 在这里循环输出每个图片的信息 -->
{/dede:productimagelist}
常用底层字段（模板变量）
在productimagelist标签内部，你可以使用以下变量来获取每个图片的具体信息：
| 字段名 | 含义 | 示例 |
|---|---|---|
@me |
当前图片的完整HTML代码（包含<img>标签），这是最常用的字段。 |
{@me} |
imgsrc |
图片的原始地址（上传时的完整路径）。 | [field:imgsrc/] |
litpic |
图片的缩略图地址（如果在上传时勾选了“生成远程缩略图”）。 | [field:litpic/] |
text |
上传图片时填写的图片描述/说明文字。 | [field:text/] |
imgwidth |
原始图片的宽度（像素）。 | [field:imgwidth/] |
imgheight |
原始图片的高度（像素）。 | [field:imgheight/] |
实际应用场景与代码示例
场景1：简单的图片列表展示
这是最基础的使用方式,直接输出所有图片。
（图片来源网络，侵删）
<h3>产品图片</h3>
<ul class="product-images">
{dede:productimagelist}
<li>
<img src="[field:imgsrc/]" alt="[field:text function='html2text(@me)'/]" />
<p>[field:text/]</p>
</li>
{/dede:productimagelist}
</ul>
代码解释：
[field:imgsrc/]：获取每张图片的地址。[field:text function='html2text(@me)'/]：对图片描述进行HTML过滤，防止XSS攻击，并作为<img>标签的alt属性。[field:text/]：直接显示图片描述。
场景2：带灯箱效果的图片画廊（常用）
这是电商网站和产品展示页最常见的需求,点击小图可以放大查看。
<h3>产品图片</h3>
<!-- 主图显示区域 -->
<div class="main-image">
<!-- 默认显示第一张图，可以通过JS实现切换 -->
<img id="main-img" src="{dede:field name='litpic'/}" alt="{dede:field name='title'/}" />
</div>
<!-- 缩略图列表 -->
<div class="thumbnail-list">
{dede:productimagelist}
<a href="[field:imgsrc/]" data-title="[field:text/]" class="thumbnail-item">
<img src="[field:litpic/]" alt="[field:text function='html2text(@me)'/]" />
</a>
{/dede:productimagelist}
</div>
对应的CSS和JS（简化版）：
.thumbnail-list .thumbnail-item {
display: inline-block;
margin-right: 10px;
cursor: pointer;
border: 2px solid transparent;
}
.thumbnail-list .thumbnail-item:hover,
.thumbnail-list .thumbnail-item.active {
border-color: #ff6600;
}
.main-image img {
max-width: 100%;
height: auto;
}
// 简单的JS切换主图效果
document.addEventListener('DOMContentLoaded', function() {
const thumbnails = document.querySelectorAll('.thumbnail-item');
const mainImg = document.getElementById('main-img');
thumbnails.forEach(thumb => {
thumb.addEventListener('click', function(e) {
e.preventDefault();
// 更新主图
mainImg.src = this.getAttribute('href');
mainImg.alt = this.getAttribute('data-title');
// 更新激活状态
thumbnails.forEach(t => t.classList.remove('active'));
this.classList.add('active');
});
});
});
与field标签结合使用
productimagelist通常和{dede:field}标签一起使用，来获取当前图集本身的信息。
{dede:field name='title'/}：获取图集的标题。{dede:field name='litpic'/}：获取图集的默认封面图（通常是上传的第一张图）。{dede:field name='body'/}：获取图集内容（包含productimagelist标签的部分）。
完整模板示例 (article_product.htm) 结构：
<!DOCTYPE html>
<html>
<head>{dede:field name='title'/}</title>
<!-- 引入CSS和JS -->
</head>
<body>
<h1>{dede:field name='title'/}</h1>
<div class="product-gallery">
<!-- 这里放上面提到的画廊代码 -->
</div>
<div class="product-description">
{dede:field name='description'/}
</div>
<!-- 图集内容本身，也可以不显示，因为上面的画廊已经调用了 -->
{dede:field name='body'/}
</body>
</html>
常见问题与注意事项
-
标签不生效，没有图片输出？
- 检查模型：确保你所在的栏目使用的是“图集”模型，而不是“文章”模型。
- ：在后台编辑该图集内容时，是否已经成功上传了图片并填写了描述，图片列表区域应该能看到所有上传的缩略图。
- 检查模板：确保
{dede:productimagelist}标签在正确的模板文件中（通常是article_product.htm），并且拼写无误。
-
[field:litpic/]没有值？litpic字段需要在上传图片时，在弹窗中勾选 “生成远程缩略图” 选项，才会有值，如果不勾选，litpic为空，[field:litpic/]就不会输出任何内容。
-
图片地址是相对路径，无法显示？
- 织梦默认在后台有“是否使用绝对网址”的选项，如果开启，图片地址会是完整的
http://或https://路径，如果没有开启，地址是相对路径（如/uploads/202510/24/xxx.jpg），如果你的网站部署在子目录下，相对路径可能会出错，建议在后台系统设置中开启“使用绝对网址”。
- 织梦默认在后台有“是否使用绝对网址”的选项，如果开启，图片地址会是完整的
-
如何获取图片数量？
productimagelist标签本身不直接提供循环次数或总数，如果你需要在循环前或循环后显示图片总数，可以通过PHP在模板文件中处理，但这比较复杂，一个简单的替代方案是在上传图片时手动记录数量，或者在前端JS中获取a.thumbnail-item的数量。
productimagelist是织梦处理图集内容的核心标签，记住它的两个关键点：
- 作用：在图集模型中循环遍历所有图片。
- 核心字段：
@me（完整HTML）、imgsrc（原图）、litpic（缩略图）、text（描述）。
掌握了它的用法,你就可以轻松构建出各种产品图片展示效果，从简单的列表到复杂的交互式画廊。
