Yii2 Nav Bar 在菜单项中添加图像答案

【问题标题】：Yii2 Nav Bar add images in menu itemsYii2 Nav Bar 在菜单项中添加图像
【发布时间】：2020-02-14 01:46:28
【问题描述】：

是否可以在 Yii2 Bootstrap Nav Bar 菜单项中添加图像？在official doc 我没有找到任何选项。

我想显示图像而不是标签文本！

导航条码是。

<?php
    NavBar::begin([
        'brandLabel' => 'My Company',
        'brandUrl' => Yii::$app->homeUrl,
        'options' => [
            'class' => 'navbar-inverse navbar-fixed-top',
        ],
    ]);

   $menuItems = [];

   $menuItems[] = [
            'label' => Yii::t('app','Language'),
            'items' => [
                [
                  'label' => 'English', 
                  'url' => ['site/language','set'=>'en'],
                ],

                '<li class="divider"></li>',

                [
                  'label' => 'Danmark',
                  'url' => ['site/language','set'=>'da'],
                ],

              ],
      ];

【问题讨论】：

标签： yii2 yii2-advanced-app

【解决方案1】：

如果是图标，你可以使用图标

   $menuItems[] = [
        'label' => Yii::t('app','Language'),
        'items' => [
            [
              'label' => 'English', 
              'url' => ['site/language','set'=>'en'],
              'icon'=> 'cog',
            ],

如果一个img和标签中的html代码

  $menuItems[] = [
        'label' => Yii::t('app','Language'),
        'items' => [
            [
              'label' => '<img src="smiley.gif" ><span>sample</span>', 
              'url' => ['site/language','set'=>'en'],
            ],

我用

use yii\bootstrap\Nav;
use yii\bootstrap\NavBar;

你应该设置'encodeLabels' => false，

        echo Nav::widget([
            'options' => ['class' => 'navbar-nav navbar-right'],
            'items' => $menuItems,
            'encodeLabels' => false,
        ]);

【讨论】：

'label' => 'sample'，我绑定了这个，但它显示的 html 是 <img src="smiley.gif" ><span>sample</span>跨度>
对我来说这个工作很奇怪..我使用导航栏小部件
能否请您发布您的导航条码！可能是你设置了一些额外的选项。
我已经更新了答案.. 使用 encodeLabels => false;
所有标签（以及我一般所有输出）都在 Yii2 中编码以避免注入代码 .. 所以标签的内容被包装以避免呈现 html .. 使用 encodeLabels => false ，您告诉框架，在这种情况下，您希望显式传递 html 代码以进行正确的渲染..希望解释清楚..

【解决方案2】：

添加 'encodeLabels' => false，作为 Nav::widget 的属性。否则，它不会将代码转换为 HTML，而是将其视为字符串，并按照标签内给出的方式显示。

echo Nav::widget([
    'options' => ['class' => 'navbar-nav navbar-left'],
    'encodeLabels' => false,
    'items' => [
        [
            'label' => '<span class="glyphicon glyphicon-home"></span>', 
            'url' => ['/site/dashboard'],
        ],
    ] // Close of items
    ]); // Close of Nav::Widget.

【讨论】：

【解决方案3】：

在“brandLabel”设置中添加图片标签：

NavBar::begin([
    'brandLabel' => '<img id="logo" src="/img/logo.svg" alt="logo">',
    'brandUrl' => Yii::$app->homeUrl,
    'options' => [
        'class' => 'navbar',
    ],
]);

【讨论】：