EyouCMS图片标签全场景调用实操指南 零基础可直接复制落地

一、前置基础说明

本指南适用EyouCMS V1.5.x及以上所有正式版本，所有调用代码直接写入/application/template/当前模板目录/下对应的模板文件即可。

核心函数get_default_pic参数规则（所有图片调用通用）：
参数顺序：图片地址、裁剪宽度、裁剪高度、是否返回绝对路径(1=是/0=否)、是否加水印(1=是/0=否)，不需要的参数可留空。

二、分场景实操调用代码

1. 单张固定图片调用（栏目封面/站点logo）

场景1：调用指定ID栏目的封面图

``` {eyou:type typeid='2'} {/eyou:type} ```

场景2：调用当前页面所属栏目封面图，直接去掉typeid参数即可，适配栏目列表页通用模板：

``` {eyou:type} {/eyou:type} ```

场景3：调用全局站点logo，直接读取后台站点配置的logo地址：

``` ```

2. 列表页批量调用文档主图

适用于产品列表、新闻列表等场景，批量调用指定栏目下文档的主图、标题、跳转链接：

```

{eyou:arclist typeid='3' row='12' orderby='sort' imgwidth='300' imgheight='200' addwater='1'}
• 

  {$field.title|msubstr=0,15}

{/eyou:arclist}

```

参数调整说明：typeid可填多个栏目ID用英文逗号分隔，orderby改为add_time则按最新发布排序，row控制调用数量。

3. 详情页自定义多图字段调用

后台新增了别名pic_list的多图类型自定义字段时，按以下代码调用，必须在arcinfo标签的fields参数中指定自定义字段别名：

``` {eyou:arcinfo aid='$eyou.field.aid' fields='pic_list,title'} {/eyou:arcinfo} ```

如果不需要裁剪直接输出原图，把|get_default_pic=,400,300这段删掉即可。

4. 独立上传的附件图片调用

如果是手动上传到服务器的固定图片，直接填写路径即可，支持相对路径和绝对路径：

``` ```

三、常见卡坑问题解决

• 问题1：输出的图片是相对路径，需要绝对路径适配小程序/第三方调用
  解决：在get_default_pic函数的第四个参数填1，示例：{$field.litpic|get_default_pic=,300,200,1}，即可输出带站点域名的完整路径。
• 问题2：裁剪后的图片模糊
  解决：进入后台「系统-系统基本参数-附件设置」，将「图片压缩质量」调整为90以上，同时确保标签里的裁剪宽高和前端CSS设置的图片展示宽高一致，避免拉伸变形。
• 问题3：自定义多图字段调用不显示内容
  排查步骤：① 确认自定义字段的别名拼写正确，区分大小写；② 确认arcinfo标签的fields参数中已经添加了该字段别名；③ 确认当前文档已经上传了该字段的对应图片。
• 问题4：不想显示系统默认占位图
  解决：在标签中添加default参数，示例：{$field.litpic|get_default_pic=,300,200,0,0=''}，图片为空时会返回空值，可配合if标签自定义占位图： ``` {eyou:arclist typeid='3' row='10'} {if condition="$field.litpic"} {else /} {/if} {/eyou:arclist} ```

四、调用效果验证步骤

第一步：清空缓存，每次修改模板后必须进入后台点击「系统-清空缓存」，EyouCMS默认开启静态缓存，不清缓存修改不会生效。

第二步：前台验证，刷新对应页面，右键点击图片选择「检查」，确认图片地址、宽高、alt属性均符合预期，点击图片可以正常打开无404错误。

第三步：多端适配验证，如果是响应式模板，需要分别在移动端、PC端验证图片加载速度、展示比例是否正常，避免出现变形、加载慢的问题。