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

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 3

Use this:

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

Answer 4

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 5

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 6

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.