如何在 EasyAdmin 3 索引页面中显示图像 - PHP

在 EasyAdmin 3 中，开发者可以使用它的内置功能轻松地创建一个完全响应式的后台管理面板。当需要在 EasyAdmin 3 的索引页面中显示图像时，开发者只需要遵循以下步骤即可。

步骤 1: 安装和配置 EasyAdmin 3

首先，我们需要通过 Composer 安装 EasyAdmin 3。在终端中运行以下命令。

composer require easycorp/easyadmin-bundle

然后，在 Symfony 项目中加载 EasyAdmin 3：

// config/bundles.php

return [
    // ...
    EasyCorp\Bundle\EasyAdminBundle\EasyAdminBundle::class => ['all' => true],
];

在此之后，您可以开始配置 EasyAdmin 3。为了完成本教程，我们需要在 EasyAdmin 3 的配置文件中添加以下配置：

# config/packages/easy_admin.yaml

easy_admin:
  entities:
    Product:
      class: App\Entity\Product
      image:
        base_path: /images/products
        placeholder_path: /images/products/placeholder.png
        web_path: ../../../../images/products
        # ...

图片配置是可选的，但在我们的例子中，我们将使用它来让 EasyAdmin 3 显示我们的产品图片。

现在，我们可以通过运行以下命令来生成 EasyAdmin 3 的索引页面：

symfony console make:admin:dashboard

步骤 2: 显示图像

默认情况下，EasyAdmin 3 可以实现对实体 (entity) 图像的支持，只需要在配置文件中添加合适的 image 配置。但是要在索引页面中显示实体图像，则需要通过自定义模板来实现。

首先，我们需要在设置目录中创建一个名为 templates/easy_admin/ 的子目录。在 easy_admin 目录下，创建一个新的 Twig 模板文件 list.html.twig：

<!-- templates/easy_admin/list.html.twig -->

{% extends '@!EasyAdmin/default/list.html.twig' %}

{% block list_item %}
    <div class="list-item row mb-2 pb-2 border-bottom">
        <div class="col-1"><img src="{{ asset(item.imageFilename) }}" height="100" /></div>
        <div class="col-4">{{ item.name }}</div>
        <div class="col-1">{{ item.price }}</div>
        <div class="col-1">{{ item.quantity }}</div>
        <div class="col-1">{{ item.status }}</div>
        <div class="col-4">{{ item.description }}</div>
    </div>
{% endblock %}

此模板基于 EasyAdmin 3 的默认列表模板，然后在每个项目前添加产品图像。要显示图像，我们使用 item.imageFilename 属性，它将获取我们在 EasyAdmin 3 配置文件中设置的 image.base_path 和当前产品的图像文件名并将其连结起来。

现在，当我们访问 EasyAdmin 3 的产品索引页面时，将显示与产品记录关联的图像。

结论

EasyAdmin 3 是用 PHP 编写的一个后台管理面板框架，提供了一套现成的界面、表单和表格组件。本教程演示了如何在 EasyAdmin 3 的索引页面中显示实体图像。通过使用它的灵活模板系统，我们可以轻松地自定义 EasyAdmin 3 的界面，并根据我们的实际需求改善它的功能。

希望对你有所帮助！