织梦标签如何调用缩略图？

核心标签：[field:picname/]

这个标签是调用缩略图的根本,它直接获取文章在后台设置的“缩略图”字段（即litpic字段）的值。

重要提示： [field:picname/] 返回的是图片的完整路径（/uploads/240101/1-2401011F530219.jpg），而不是 <img> 标签，你需要自己将其包裹在 <img> 标签内才能在页面上显示。

在列表页（arclist标签）中调用缩略图

这是最常见的情况,比如在首页、栏目页的文章列表中显示文章缩略图。

基础写法

在 {dede:arclist} 循环标签内，使用 [field:picname/]。

{dede:arclist row='10' titlelen='30'}
  <li>
    <a href="[field:arcurl/]">
      <img src="[field:picname/]" alt="[field:title/]" />
    </a>
    <a href="[field:arcurl/]">[field:title/]</a>
  </li>
{/dede:arclist}

代码解释：

• {dede:arclist row='10'}: 调用10篇文章。
• [field:picname/]: 获取缩略图路径。
• [field:arcurl/]: 获取文章链接。
• [field:title/]: 获取文章标题，用作 img 标签的 alt 属性，这有利于SEO。

高级写法：自动判断并添加默认图片

很多时候,文章可能没有上传缩略图，直接调用 [field:picname/] 会显示一个破损的图片图标，我们可以使用织梦的条件判断语句 {dede:if} 来解决这个问题。

{dede:arclist row='10' titlelen='30'}
  <li>
    <a href="[field:arcurl/]">
      {dede:if}
        [field:picname/]
        {else}
        /images/default.jpg  <!-- 这里设置你的默认图片路径 -->
        {/dede:if}
      <img src="[field:picname function='(@me=="") ? "/images/default.jpg" : @me ']" alt="[field:title/]" />
    </a>
    <a href="[field:arcurl/]">[field:title/]</a>
  </li>
{/dede:arclist}

代码解释： 这里提供了两种实现方式，推荐使用第二种（function函数），因为它更简洁高效。

• {dede:if} 标签（逻辑清晰）

  {dede:if}
    [field:picname/]  <!-- 如果缩略图存在 -->
  {else}
    /images/default.jpg <!-- 否则显示默认图片 -->
  {/dede:if}

  这种写法虽然直观,但在 <img> 标签内使用会有些冗余。

  
  （图片来源网络，侵删）

• function 函数（推荐，更专业）

  [field:picname function='(@me=="") ? "/images/default.jpg" : @me ']

  代码解析：

  • function='...': 对字段值进行函数处理。
  • @me: 代表当前字段的原始值，在这里就是 [field:picname/] 的值。
  • (@me=="") ? ... : ...: 这是一个三元运算符。
    • @me=="": 判断缩略图路径是否为空。
    • ? "/images/default.jpg": 如果为空，则返回默认图片的路径。
    • @me: 如果不为空，则返回原始的缩略图路径。

页（article_articledit标签）中调用缩略图

在文章的详情页（article_article.htm 模板）中，通常只需要调用一张主图。

基础写法

直接使用 [field:picname/] 即可。

<div class="article-content">
  <!-- 文章正文内容 -->
  [field:body/]
  <!-- 文章缩略图 -->
  {dede:field name='picname'/}
</div>

注意： 在内容页中，[field:picname/] 通常写作 {dede:field name='picname'/}，两者效果基本相同，后者是更规范的写法。

带默认图片的写法

同样可以使用 function 函数来处理没有缩略图的情况。

<img src="{dede:field name='picname' function='(@me=="") ? "/images/default.jpg" : @me '/}" alt="{dede:field name='title'/}" />

使用自定义字段（更灵活）

你可能需要为文章上传多张图片,或者需要一个额外的图片字段，这时可以使用织梦的自定义字段功能。

添加自定义字段

1. 进入后台：核心 -> 内容模型管理 -> 选择你的文章模型（文章”）-> 字段管理。
2. 点击 添加新字段。
3. 字段名: images (英文，不能有特殊字符)
4. 字段类型: 多媒体 (这样会自动上传图片)
5. 保存。

在文章编辑页上传图片

编辑文章时,你会看到新增的 images 字段，在这里上传一张或多张图片。

在模板中调用自定义字段

假设你添加的字段名是 images，调用方法如下：

{dede:field name='images'/}

这会返回你上传的图片路径,如果需要显示多张图片（如果你上传的是多图），织梦会默认用 分隔路径，你需要用 explode 函数来分割。

{dede:field name='images' function='str_replace("|", ",", @me)'/}

这会将 图片1路径|图片2路径 转换为 图片1路径,图片2路径，方便用于JS幻灯片等场景。

常见问题与解决方案

缩略图不显示，显示为红色“X”图标

• 原因：文章没有上传缩略图。
• 解决：使用上面提到的“带默认图片”的写法，设置一个默认图片。

缩略图显示不出来，但后台有上传

• 原因1：模板路径错误，确保你的默认图片路径是相对于网站根目录的（/images/default.jpg）。
• 原因2：织梦缓存问题，进入后台 -> 系统 -> 一键更新网站 -> 更新HTML -> 更新栏目 和 更新文档，清除缓存。
• 原因3：文件权限问题，检查 uploads 目录是否有写入权限。

如何控制缩略图的尺寸？

• CSS控制（推荐） 在 <img> 标签上添加 class，然后在CSS文件中定义样式。

  <img src="[field:picname/]" class="thumb-img" alt="[field:title/]" />

  .thumb-img {
    width: 200px;
    height: 150px;
    object-fit: cover; /* 保持图片比例并填充区域 */
  }

• 织梦自动生成缩略图 织梦后台有设置，可以自动在上传时生成不同尺寸的缩略图，你需要在模板中调用对应的字段，[field:litpic/] 可能对应一个特定尺寸的缩略图，但这通常需要提前在后台配置好。

希望这份详细的指南能帮助你完全掌握在织梦中调用缩略图的方法！