如何在前台页面展示图片资源的详细信息，如文件名、大小和图片地址？

在使用AnQiCMS管理网站内容时，图片无疑是提升页面吸引力的重要元素。我们经常需要在前端页面不仅展示图片本身，还希望能够进一步展示图片的详细信息，比如它们的文件名、大小和存储地址。这对于访客理解图片背景、进行内容引用，或是对图片进行管理和下载等操作都非常有帮助。

AnQiCMS作为一个高效、灵活的内容管理系统，提供了便捷的图片上传和管理功能。图片资源管理页面（通常在“页面资源”下的“图片资源管理”）为我们展示了每张图片的详尽信息，包括文件名、文件类型、上传时间、文件大小、图片分辨率以及图片地址等。这些信息在后台清晰可见，那么如何将这些宝贵的数据呈现在前端页面上呢？

安企CMS如何在前台展示图片的基本信息（URL）

首先，最基础也是最核心的，是图片在前台的显示。无论是文章、产品还是单页面，我们通常会将图片作为缩略图、封面图或内容中的插图来使用。AnQiCMS提供了相应的模板标签来获取这些图片的URL地址。

例如，在文档（文章或产品）详情页中，如果文档设置了缩略图，我们可以通过 archiveDetail 标签来获取图片地址：

{# 假设我们正在一个文档详情页，获取文档的封面首图URL #}
<img src="{% archiveDetail with name="Logo" %}" alt="{% archiveDetail with name="Title" %}" />

{# 如果需要获取文档内容的缩略图，可能是这样 #}
<img src="{% archiveDetail with name="Thumb" %}" alt="{% archiveDetail with name="Title" %}" />

如果图片是作为多图组（如轮播图或画廊）的一部分，我们可以循环遍历 Images 字段来获取每张图片的URL：

{# 假设我们在一个页面，获取其设置的Banner组图 #}
{% pageDetail pageImages with name="Images" %}
<ul>
  {% for item in pageImages %}
  <li>
    <img src="{{item}}" alt="页面名称" />
    {# 在这里，{{item}}就是每张图片的URL地址 #}
  </li>
  {% endfor %}
</ul>

通过这些标签，我们可以轻松地在前端页面上展示图片，并且 {{item}} 或 {% archiveDetail with name="Logo" %} 这样的输出，直接就是图片在服务器上的完整访问地址。

更进一步：展示图片文件名、大小与分辨率

AnQiCMS的后端“图片资源管理”界面确实展示了每张图片的详细元数据，如文件名、大小和分辨率。但在前端模板标签层面，对于通过 Logo、Thumb 或 Images 字段获取到的图片URL，系统默认并没有提供直接的标签来额外输出这些详细的元数据。这是因为前端在渲染页面时，通常更侧重于图片本身的展示和加载速度，图片元数据的直接输出并非所有场景都必需。

不过，这并不意味着我们完全没有办法。我们可以考虑以下几种策略：

1. 展示图片地址（URL）

正如前面提到的，{{item}} 或 {% archiveDetail with name="Logo" %} 等标签直接输出的就是图片的URL。这本身就包含了图片在网站上的“地址”信息。

{# 在图片下方显示其URL地址 #}
<div>
  <img src="{% archiveDetail with name="Logo" %}" alt="{% archiveDetail with name="Title" %}" />
  <p>图片地址：<span>{% archiveDetail with name="Logo" %}</span></p>
</div>

2. 展示图片文件名（通过自定义字段或前端解析）

  • 通过自定义内容模型字段： 这是最推荐也最可靠的方法。 如果希望在前端展示图片的原始文件名，我们可以在AnQiCMS的内容模型中添加一个自定义字段。例如，在“文章模型”或“产品模型”中，除了原有的“缩略图”字段外，可以新增一个“原始文件名”的文本字段。

    1. 前往后台“内容管理” -> “内容模型”。
    2. 选择需要修改的模型（如“文章模型”），点击“修改”。
    3. 在“内容模型自定义字段”中，添加一个新字段，例如“参数名”为“原始文件名”，“调用字段”为 original_filename，“字段类型”选择“单行文本”。
    4. 保存模型设置。
    5. 在发布或编辑文章时，手动填写或复制图片的原始文件名到这个新字段中。

    之后，在前端模板中，就可以像调用其他自定义字段一样来显示它：

    {# 假设我们在文章详情页，且已设置自定义字段 original_filename #}
<div>
  <img src="{% archiveDetail with name="Logo" %}" alt="{% archiveDetail with name="Title" %}" />
  <p>图片地址：<span>{% archiveDetail with name="Logo" %}</span></p>
  <p>原始文件名：<span>{% archiveDetail with name="original_filename" %}</span></p>
</div>

  • 通过前端JavaScript解析URL： 如果不想增加自定义字段，也可以考虑通过JavaScript在前端从图片URL中提取文件名。但这只能提取URL路径中的文件名部分，无法获取原始上传时的文件名（如果服务器对文件名进行了重命名）。

    <img id="myImage" src="{% archiveDetail with name="Logo" %}" alt="{% archiveDetail with name="Title" %}" />
<p>图片地址：<span id="imageUrl"></span></p>
<p>文件名：<span id="imageFilename"></span></p>


<script>
  document.addEventListener('DOMContentLoaded', function() {
    const imageUrlElement = document.getElementById('imageUrl');
    const imageFilenameElement = document.getElementById('imageFilename');
    const imgElement = document.getElementById('myImage');


    if (imgElement && imgElement.src) {
      const fullUrl = imgElement.src;
      imageUrlElement.textContent = fullUrl;


      // 从URL中提取文件名
      const filename = fullUrl.substring(fullUrl.lastIndexOf('/') + 1);
      imageFilenameElement.textContent = filename;
    }
  });
</script>

3. 展示图片大小和分辨率

AnQiCMS的前端模板标签并未直接提供获取图片文件大小和分辨率的功能。这些信息通常需要在图片加载完成后通过JavaScript来获取（例如通过 Image 对象的 naturalWidth 和 naturalHeight 属性获取分辨率），或者在服务端处理时将它们预先存储在自定义字段中。

  • 前端JavaScript获取分辨率：

    ”`html