dede自定义模型如何添加图片字段？

1. 创建自定义模型：确定你的新内容类型。
2. 添加图片类型的字段：在模型中增加一个用于上传图片的字段。
3. 在后台发布内容：使用新模型发布内容并上传图片。
4. 在前台模板中调用图片：在模板文件中使用代码将图片显示出来。

第一步：创建自定义模型 (如果还没有的话)

假设我们要创建一个“产品展示”模型。

1. 登录 DedeCMS 后台。
2. 进入【核心】 -> 【内容模型管理】。
3. 点击【增加新模型】。
4. 填写模型信息：
   • 模型名称：产品展示 (前台显示的名称)
   • 表前缀：dede_ (保持默认即可)
   • 模型表名：addonproduct (系统会自动生成，你也可以自定义，但需要是英文或数字)
   • 字段目录：product (用于存放该模型字段的目录)
   • 名称规则：{typedir}/{aid}.html (文章的URL命名规则)
   • 列表命名规则：{typedir}/list_{page}.html (列表页URL命名规则)
5. 点击【保存】，系统会自动创建数据表 dede_addonproduct 用于存储这个模型的内容。

第二步：为模型添加图片字段

这是最关键的一步,我们需要为“产品展示”模型添加一个“产品图片”字段。

1. 在后台继续操作,进入【核心】 -> 【内容模型管理】。
2. 找到你刚刚创建的“产品展示”模型，点击右侧的【字段管理】。
3. 点击【增加新字段】。
4. 填写字段信息：
   • 字段名称：pic (这个是关键，后台PHP代码会通过这个名字来获取数据，必须是英文或数字)
   • 字段说明：产品图片 (后台表单显示的提示文字)
   • 字段类型：选择 image (这是核心，选择图片类型)
   • 字段大小：255 (默认即可，用于存储图片路径)
   • 默认值：留空
   • 数据处理：保持默认
   • 显示方式：<input type='file'> (这是最常用的方式，会生成一个文件上传按钮)
   • 后台调用字段：勾选此项，方便在后台列表中缩略图预览。
   • 前台表单调用：勾选此项，如果需要会员投稿也能上传图片。
5. 点击【保存】。

至此,你的“产品展示”模型已经有了一个名为 pic 的图片字段。

第三步：在后台发布内容并上传图片

1. 进入【核心】 -> 【普通文章发布】 (注意：无论你创建什么模型，都在“普通文章发布”里选择对应模型)。
2. 在发布页面,选择你刚才创建的模型，产品展示”。
3. 你会发现内容编辑区域多了一个“产品图片”的字段。
4. 点击“产品图片”旁边的 “上传” 或 “选择图片” 按钮。
5. 在弹出的窗口中,选择你要上传的图片，设置好缩略图选项（是否自动生成、尺寸等），然后上传。
6. 上传成功后,图片路径会自动填写到 pic 字段中。
7. 、内容等其他信息，然后点击【发布】。

你的数据库里已经有一条记录,dede_addonproduct 表的 pic 字段里存储了这张图片的路径，/uploads/product/202511/01/xxx.jpg。

第四步：在前台模板中调用图片

调用方式分为两种：列表页调用 和 内容页调用。

列表页调用 (list_product.htm)

在列表页,你通常需要循环输出所有产品的缩略图和标题。

{dede:list pagesize='10'}
  <li>
    <!-- 调用图片 -->
    <a href="[field:arcurl/]">
      <img src="[field:pic/]" alt="[field:title function='html2text(@me)'/]" />
    </a>
    <!-- 调用标题 -->
    <a href="[field:arcurl/]">[field:title/]</a>
  </li>
{/dede:list}

代码解释：

• {dede:list ...}: 列表循环标签。
• [field:pic/]: 核心标签，它会直接输出你在后台为该条内容上传的图片路径，DedeCMS 会自动识别 pic 是图片字段，并将其路径值赋予 src 属性。
• [field:title/]: 调用文章标题。
• [field:arcurl/]: 调用文章的链接地址。

内容页调用 (article_product.htm)

页,你需要显示大图和详细内容。

<h1>[field:title/]</h1>
<!-- 调用大图 -->
<div class="product-image">
  <img src="[field:pic/]" alt="[field:title function='html2text(@me)'/]" />
</div>
<!-- 调用文章内容 -->
<div class="product-content">
  [field:body/]
</div>

代码解释：

• [field:pic/]: 在内容页中，同样使用这个标签来调用上传的图片。
• [field:body/]: 调用文章的详细内容。

常见问题与进阶技巧

如何获取图片的原始路径而不是缩略图？

在后台上传图片时,DedeCMS 会同时保存原始图路径和缩略图路径。[field:pic/] 默认调用的是你最后上传的那张图的路径，如果你设置了生成多张缩略图，并且想调用特定尺寸的缩略图，可以使用以下方法：

• 调用第一张缩略图：[field:litpic/] (litpic 是系统默认的缩略图字段名，但对于我们自定义的 pic 字段，直接用 [field:pic/] 即可)
• 调用特定尺寸的缩略图：DedeCMS 默认不支持，你需要修改系统文件或在后台配置中开启“图片本地化”功能，或者在上传时选择“不生成缩略图”，只保留原图。

如何在列表页调用多张图片？

DedeCMS 的单图片字段 (image) 只能存一张图片的路径，如果你需要上传多张图片，应该使用 imglist 或 imgs 字段类型。

• imglist: 用于上传多张图片，但不会生成缩略图，在后台以文本形式存储，每张图片路径用 分隔。

  • 调用方式:

    {dede:list}
      <!-- 调用第一张图片 -->
      <img src="[field:imglist function='@me explode("|||")'][0]/]" />
      <!-- 循环调用所有图片 -->
      {dede:imglist}
        <img src="[field:src/]" />
      {/dede:imglist}
    {/dede:list}

• imgs: 用于上传多张图片，并会自动生成缩略图，调用方式更方便。

  • 调用方式:

    {dede:list}
      <!-- 循环调用所有图片（包括大图和缩略图） -->
      {dede:img}
        <a href="[field:src/]"><img src="[field:imgsrc/]" /></a>
      {/dede:img}
    {/dede:list}

图片路径问题，前台显示不出来？

这是最常见的问题,通常是因为网站路径配置错误。

• 检查后台设置：进入【系统】 -> 【系统基本参数】 -> 【核心设置】，确认“站点根网址”是否正确，http://www.yourdomain.com。
• 检查图片上传目录：确保图片上传到了正确的目录，并且该目录有可读写权限。
• 使用绝对路径：如果网站被放在子目录，或者使用了伪静态后路径有问题，可以在模板中使用绝对路径（在域名前加上 http://）。

  <!-- 强制使用绝对路径 -->
  <img src="http://www.yourdomain.com[field:pic/]" />

为 DedeCMS 自定义模型添加图片字段，核心流程就是：

创建模型 -> 添加 image 类型字段 -> 后台上传图片 -> 前台用 [field:你的字段名/] 调用。

掌握了这个流程,你就可以为 DedeCMS 创建出功能丰富、图文并茂的各种内容类型了，希望这个详细的教程能帮到你！