1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

iView の Table コンポネントで画像を render する方法

Last updated at Posted at 2018-06-14

iViewTable を使って、画像を表示しようとして、やり方がドキュメントになかったので、メモしたい

ソース

<template>
    <div>
         <Table :columns="columns" :data="tokens"></Table>
    </div>
</template>

<script>
export default {
    data () {
        return {
            columns: [
                {
                    title: 'Name',
                    key: 'name',
                    render: (h, params) => {
                        return h('div', [
                            h('img', { attrs: { src: require(`../../images/${params.row.icon}`) } }),
                        ])
                    }
                },
            ]
        };
    },
};
</script>

ハマったポイント

  1. imgsrc を指定したいが、 props ではできず、attrs を使うとできました
  2. img のパスですが、該当ファイルからの相対パスだけでは画面上に表示できず、require(...)を入れるとできました。
1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?