Image in gridview in yii2

Question

How to put an image in GridView in yii2?I have the following code. But its not displaying the image as it is not giving any image url. Where to put the image url?

 <?php echo GridView::widget([
    'dataProvider' => $dataProvider,
    'filterModel' => $searchModel,
    'columns' => [
        ['class' => 'yii\grid\SerialColumn'],

        'c_id',
        'name:ntext',
        'description:ntext',
        array(
                'format' => 'image',
               'attribute'=>'logo',

),

        ['class' => 'yii\grid\ActionColumn'],
    ],
]); ?>

Answer 1

Try like,

 array(
'format' => 'image',
'value'=>function($data) { return $data->imageurl; },

   ),

And in your model,

public function getImageurl()
{
return \Yii::$app->request->BaseUrl.'/<path to image>/'.$this->logo;
}

Don't know this is the right way or not.But this works for me.

Answer 2

Use this:

   [
        'attribute' => 'image',
        'format' => 'html',    
        'value' => function ($data) {
            return Html::img(Yii::getAlias('@web').'/images/'. $data['image'],
                ['width' => '70px']);
        },
    ],

Answer 3

Yii 2 has built-in helper for building urls. You can bulld the url to image by path too (by passing second parameter $scheme).

So I recommend using this:

GridView:

use yii\helpers\Url;

[
    'format' => 'image',
    'value' => function ($model) {
        return $model->getImageUrl(); 
    },
],

Model:

public function getImageUrl()
{
    return Url::to('@web/path/to/logo/' . $this->logo, true);
}

Answer 4

You can try this one:

 <?= GridView::widget
                ([
                    'dataProvider' => $dataProvider,
                     'filterModel' => $searchdata,
        'columns' => [
                      [
                         'attribute' => 'logo',
                         'format' => 'html',
                         'label' => 'Image',
                         'value' => function ($data) {
                                    return Html::img('/advanced/hello/frontend/web/image/' . $data['logo'],
                                    ['width' => '80px',
                                     'height' => '80px']);
                                   },
                     ],
                    ],
                 ]);
        ?>

Answer 5

In views->image->index.php

<?= GridView::widget([
        'dataProvider' => $dataProvider,
        'filterModel' => $searchModel,

        'columns' => [
            ['class' => 'yii\grid\SerialColumn'],
             [
             'attribute'=>'image_path',
            'label'=>'Image',
            'format'=>'html',
            'content' => function($data){
                $url = $data->getParentName();
                return Html::img($url, ['alt'=>'yii','width'=>'250','height'=>'100']);
                        }
            ],
            'caption1',
            'caption2',
            'status',
            ['class' => 'yii\grid\ActionColumn'],
        ],
        'tableOptions' =>['class' => 'table table-striped table-bordered'],

    ]); ?>

In model->image

 public function getParent()
    {
        return $this->hasOne(Image::className(), ['image_id' => 'image_id']);
    }
    public function getParentName()
    {
        $model=$this->parent;
        return $model?$model->image_path:'';
    }

table attributes are, image_id,image_path,caption1,caption2,status

Answer 6

I used to use 'raw' format for this type of work.

[
    "attribute": "image",
    "format": "raw",
    "value": function($model){
        return ($model->image) ? Html::img("/path-to-img-location" . $model->image) : false;
    }
]

if image exists then image is displayed otherwise it is blank.

Answer 7

You can also use:

public function getImageurl()
{
  return \Yii::$app->urlManager->createUrl('@web/path/to/logo/'.$this->logo);
}

'@web' is a predefined path aliases.

'urlManager->CreateUrl()' do something more than resolving aliases.

Answer 8

It is simple you can just declare it in your index file as below.

[
            'label' => Your Label Here',  
            'format' => 'raw',   
            'value' => function ($data) {
                 $images = '';

                $images = $images.Html::img(\Yii::$app->request->BaseUrl.'/your-path-here/'.$date->getImagefilename(),['alt'=>'','width'=>'30','height'=>'30', 'data-toggle'=>'tooltip','data-placement'=>'left','title' => $name->pictogram_comment ,'style'=>'cursor:default;']);
                return ($images);

            }
            ],

You will have to get image instance from your model. If required example please comment, will get back on that.

Answer 9

<?php echo GridView::widget([
    'dataProvider' => $dataProvider,
    'filterModel' => $searchModel,
    'columns' => [
        ['class' => 'yii\grid\SerialColumn'],

        'c_id',
        'name:ntext',
        'description:ntext',
        'logo:image',

        ['class' => 'yii\grid\ActionColumn'],
    ],
]); ?>