织梦cms 栏目图片

织梦CMS栏目图片怎么设置和调用？

织梦CMS为每个栏目提供了缩略图/栏目图片字段，可以在栏目管理界面中上传，然后在模板中调用显示。栏目图片常用于首页分类图标展示、导航栏图标等场景。

一、如何设置栏目图片？

设置栏目图片的步骤如下：

1. 登录织梦CMS后台管理界面。
2. 进入"核心"→"栏目管理"。
3. 找到需要设置图片的栏目，点击"修改"。
4. 在"栏目图片"字段中，点击"上传"按钮选择图片。
5. 图片上传成功后，点击"确定"保存修改。

二、如何在模板中调用栏目图片？

使用channel标签调用栏目图片

在导航或栏目列表中显示每个栏目的图片：

{dede:channel type='top' row='10'}
<div class="col">
<a href="[field:typelink/]">
<img src="[field:typeimg/]" alt="[field:typename/]">
<span>[field:typename/]</span>
</a>
</div>
{/dede:channel}

[field:typeimg/]就是栏目图片调用字段，输出的是图片的完整URL路径。

使用channelartlist调用栏目及图片

{dede:channelartlist row='6' typeid='top'}
<div class="cate-item">
<a href="{dede:field name='typeurl'/}">
<img src="{dede:field name='typeimg'/}" alt="{dede:field name='typename'/}">
</a>
<h3>{dede:field name='typename'/}</h3>
</div>
{/dede:channelartlist}

在channelartlist标签中，使用{dede:field name='typeimg'/}获取栏目图片。

三、栏目图片未设置时的默认处理

如果某个栏目没有设置图片，[field:typeimg/]会输出空值。建议设置默认图片：

{dede:channel type='top' row='10'}
<a href="[field:typelink/]">
<img src="[field:typeimg/]" alt="[field:typename/]" 
onerror="this.src='/images/default.png';this.onerror=null;">
<span>[field:typename/]</span>
</a>
{/dede:channel}

使用onerror属性可以在图片加载失败时自动替换为默认图片。

四、在首页单独调用指定栏目的图片

如果需要在首页展示特定栏目的图片和名称：

{dede:type typeid='5'}
<div class="special-cate">
<a href="[field:typelink/]">
<img src="[field:typeimg/]" alt="[field:typename/]">
</a>
<p>[field:typename/]</p>
</div>
{/dede:type}

五、栏目图片的尺寸适配

栏目图片上传时建议统一尺寸，通过CSS控制显示大小：

.cate-item img{width:100%;height:auto;max-width:200px;object-fit:cover;}

使用object-fit:cover可以保图片不变形地填满容器。

六、栏目图片路径格式

栏目图片存储在上传目录中（默认/uploads/目录下），[field:typeimg/]输出的路径格式通常为：

/uploads/allimg/230101/1-2301011445000-L.jpg

注意：如果输出的是相对路径，在深层子页面中使用时可能需要手动补全域名前缀。