1、在table中顯示圖片
(1)只有一張圖片 即返回的是String類型
{ title: '附件', key: "image", render: (h, params) => { let _img = params.row.image?config.default.baseUrl.dev+'/'+params.row.image:''; return h('img', { attrs: { src: _img, style: 'width: 40px;height: 40px;' }, },); } },
應該用attrs
而不是 props
.
(2)循環多張圖片 即返回的是Array類型
{ title: '附件', key: "image", render: (h, params) => { let imgs = params.row.image; return h('div',imgs.map(item=>{ return h('img', { attrs: { src: item, style: 'width: 40px;height: 40px;' }, },); }),) } },
2、不僅在表格中顯示圖片,還要點擊放大圖片,還是用Viewer
{ title: '附件', key: "image", render: (h, params) => { let _img = params.row.image?config.default.baseUrl.dev+'/'+params.row.image:''; //因為現在后台返回來的只有一張圖片,String類型。 let imgs = [_img];//組裝成 數組 if(_img){ return h('viewer', { props:{ images:imgs //數組 } }, imgs.map(img=>{ //循環顯示 return h('img', { attrs: { src: img, style: 'width: 40px;height: 40px;' }, },); }) ) }else{ return h("span", ''); } } },