yii2 图像在图像下方有一个标签

Question

在 yii2 中，我正在显示来自数据库的图像，对于相同的图像，我在数据库中有评论 table。我希望图片描述在图片下方，我无法实现。

我的代码。

<div class="margin-top-20">
  <h5>  <p class="details-edit">  <i class="fa fa-picture-o"></i> GHS Pictograms </p> </h5>
    <div class="panel panel-default panel-edit">
        <div class="panel-body">

            <?php 
             $images = '';
             $a = '';
              // append all images
             //  var_dump($data->getPictogramPath()); exit();
            foreach($model->getPictogramPath() as $name)       
                $images =$images.' '.Html::img(\Yii::$app->request->BaseUrl.'/web'.$name->pictogram_filepath,['alt'=>'','width'=>'100','height'=>'100', 'data-toggle'=>'tooltip','data-placement'=>'left','title' => $name->pictogram_comment ,'style'=>'cursor:default;']).Html::label($name->pictogram_comment,['class' => 'pictogram-label']);
                $a = $a.Html::label($name->pictogram_comment);

            echo ($images);
           ?>

        </div>
    </div>

</div>

我的输出是：

我无法获取图片下方的标签。任何人都可以告诉我这是什么问题吗？

谢谢..

Answer 1

您的 html 结构需要稍作改动。首先需要 将每个图像和标签包装在块 中，还需要在 css 文件中进行 一些更改。

您的代码将如下所示：

$images = ''; $a = ''; // Append all images foreach($model->getPictogramPath() as $name) { $images .= Html::beginTag('div', ['class' => 'img-and-label-wrapper']); $images .= Html::img(\Yii::$app->request->BaseUrl. '/web' . $name->pictogram_filepath, ['alt' => '', 'width' => '100', 'height' => '100', 'data-toggle' => 'tooltip', 'data-placement' => 'left', 'title' => $name->pictogram_comment ,'style'=>'cursor:default;']); $images .= Html::label($name->pictogram_comment,['class' => 'pictogram-label']); $images .= Html::endTag('div'); } echo $images;

这里需要添加的样式：

.img-and-label-wrapper { display : inline-block; } .img-and-label-wrapper label{ display: block; text-align: center; }

我猜这对你有帮助

yii2 图像在图像下方有一个标签

yii2 Image to have a label below the image

image

yii2

yii2-basic-app