在 ChoiceType Symfony 5 中使用图像而不是文本标签

Posted 2023-02-16

【中文标题】在 ChoiceType Symfony 5 中使用图像而不是文本标签

【英文标题】：Use image instead of text label in ChoiceType Symfony 5

【发布时间】：2022-01-03 15:54:51

【问题描述】：

我有一个带有 ChoiceType 的表单，它显示多个复选框

我想展示这样的东西

<input type="checkbox">
<label><img src="..."></label>

但是好像不能只给文字标签不给图片，怎么办？

$builder->add('whatever',
        ChoiceType::class,
        [
          'choices' =>
            [
              'firstLabel' => 'firstValue',
              'secondLabel' => 'secondeValue',
              'thirdLabel' => 'thirdValue'
            ],
          'expanded' => true,
          'multiple' => true,
        ]
      );

【参考方案1】：

您可以创建一个自定义 form_theme 将图像作为标签处理。

或者更简单、更具体的方法是覆盖whatever 的标签模板。 See an example from SymfonyCast

创建一个新的树枝模板，例如templates/form/field/whatever_label.html.twig。

重要的部分是你如何命名你的树枝块 (see symfony doc)。

您可以覆盖每个 whatever 字段或仅覆盖特定实体的 whatever 字段。

假设您的实体名称是Product。你应该将你的区块命名为% block _product_whatever_label %。

现在，您可以在字段中做任何您想做的事情，例如直接添加图像或使用来自form 变量的配置。

% block _product_whatever_label  %
   <label>
    <img src="myImage.png"></img>
   </label>
% endblock %