程序网站开发,学生个人作品集制作,wordpress指定文章p=,河南网站建设公司价格一、后端直接返回图片url
当图片字段接口直接返回的是图片url#xff0c;可以直接放到img标签上 img v-ifthumbLoader classr-image-loader-thumb :srcresUrl /
二、当图片字段接口直接返回的是图片Id
那么就需要去拼一下图片…一、后端直接返回图片url
当图片字段接口直接返回的是图片url可以直接放到img标签上 img v-ifthumbLoader classr-image-loader-thumb :srcresUrl /
二、当图片字段接口直接返回的是图片Id
那么就需要去拼一下图片链接
调用下接口吧返回的id传过去拼接即可
img v-ifthumbLoader classr-image-loader-thumb :srcimgSrc /const imgSrc computed(() {return /bnc_rest/market/file/${resUrl};});
三、接口直接返回的是图片文件
需要自行拼接 ------------------------结构部分
img v-ifthumbLoader classr-image-loader-thumb :srclogo /------------------------js部分
import { getEnterpriseLogo } from /api/index.js;const logo computed(() {let url ;if (props.detail props.detail.enterpriseVO props.detail.enterpriseVO.enterpriseId) {//在api.js文件里写个方法调用 或者直接拼//1.调用的方法url getEnterpriseLogo(props.detail.enterpriseVO.enterpriseId);//2.直接在当前页面拼接// url /bnc_rest/org/orgunits/${props.detail.enterpriseVO.enterpriseId}/logo;}return url;
});
api/index.js文件
/*** 获取企业logo*/
export const getEnterpriseLogo id {return /bnc_rest/org/orgunits/${id}/logo;
};相当于一个预览接口
/*** 预览文件* param {string} fileId 文件id*/
function purview(id) {window.open(/bnc_rest/market/file/${id});
}
四、在table表格里去放置图片字段
用的ui组件库为arco-deiagn vue 组件库 a-tablecolumn-resizable:bordered{ headerCell: true, wrapper: false }:datartableTableData:scrollbarfalse:paginationfalse:row-selectionrowSelectionrow-clickrowClickv-model:selected-keysselectedKeys:row-keyrowKeyv-bind{ ...OtherProps }:scrollscrollConfigselectrowSelectselect-allrowAllSelect:span-methodspanMethodreftableReftemplate #summary-cell{ column, record }div{{ record[column.dataIndex] }}/div/templatetemplate #columnsa-table-column alignleft title序号 v-ifshowSeq :widthshowSeqWidth classfirsttemplate #cell{ rowIndex }{{ currentPageStart rowIndex }}/template/a-table-columna-table-columnv-for(c, i) in columns:widthc.width ? c.width : i 1 columns.length ? 120 : undefined:alignc.align ? c.align : left:titlec.title:data-indexc.dataIndex:fixedc.fixed ? c.fixed : :keyitemplate #cell{ rowIndex, record, column }!-- 自定义单元格内容 --slot:namec.slotName ? c.slotName : c.dataIndex:rowIndexrowIndex:recordrecord:cellrecord[column.dataIndex]!-- 图片 --template v-ifc.type c.type imgRImagev-ifrecord[column.dataIndex]fitcoverheight32width100%:srcrecord[column.dataIndex]show-loaderclassr-table-content-img/RImagespan v-else-/span/template!-- 附件 --template v-else-ifc.type c.type fileRLink v-modelrecord[column.dataIndex] v-ifrecord[column.dataIndex]/RLinkspan v-else-/span/templatediv v-else{{ formatterCell(record, c) }}/div/slot/template/a-table-column/a-table 此处为表格内单元格的图片放置对其设置一个表格插槽即可
