table表格图片展示

<el-table
          ref="table"
          :data="tableData"
          :header-cell-style="{ background: '#F5F7FA', height: '30px' }"
          style="width: 100%; margin: 0 auto"
          height="100%"
          align="center"
          row-key="id"
        >
//图片展示
          <el-table-column prop="picture" align="center" label="图片" min-width="120" sortable="custom" :show-overflow-tooltip="true">
            <template slot-scope="scope">
                <el-image style="height: 50px" :src="imgReport(scope.row?.pictureAddress)" fit="fill" />
              </div>
            </template>
          </el-table-column>
        </el-table>

//需要引入外部的FormatImgUrl 方法    
imgReport(data) {
      if (data) {
        const str = FormatImgUrl.encodeUrl(data)
        return str
      }
    },

/**
 * 图片路径处理类
 */
export class FormatImgUrl {
  static RegExpress = / src=.*?\" /g
  // 文件安全问题，预览时图片加code
  static encodeRichText(richTextStr: string) {
    return richTextStr.replace(this.RegExpress, (p) => {
      return p.replace('src="', `src="${config.baseUrl}`).slice(0, -2) + `?code=${md5(SessionStorage.getItem('token'))}" `
    })
  }
  // 上传时候去掉图片访问的自定义前缀和code
  static decodeRichText(richTextStr: string) {
    return richTextStr.replace(this.RegExpress, (p) => {
      const popPrefixStr = p.replace(`src="${config.baseUrl}`, 'src="')
      const queryIndex = popPrefixStr.indexOf('?code')
      return popPrefixStr.slice(0, queryIndex) + '" '
    })
  }
  static encodeUrl(urlStr: string) {
    return (urlStr.indexOf(config.gateway_prefix) > -1 ? config.baseUrl : config.baseUrl + config.gateway_prefix) + urlStr + `?code=${md5(SessionStorage.getItem('token'))}`
  }
}