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", ''); } } },