fix: Attachment image not display when forward request (#568)

Author: liiil825

server/routes/page.js

@@ -1,9 +1,17 @@
 const Router = require('koa-router');
+const agent = require('lib/request').default;
 const auth = require('../middleware/auth');
 const gzip = require('../middleware/gzip');
 
 const router = new Router();
 
+router.get('/attachments/:id', async ctx => {
+  const { apiServer } = ctx.store;
+  const apiUrl = `${apiServer.split('/v')[0]}/attachments/${ctx.params.id}/raw`;
+
+  ctx.body = await agent.send('get', apiUrl);
+});
+
 router.get('/:page(/?.*)', auth, gzip, async (ctx, next) => {
   try {
     await next();

src/components/Base/Image/index.jsx

@@ -2,6 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
+import { startsWith } from 'lodash';
+
 import styles from './index.scss';
 
 export default class Image extends React.Component {
@@ -47,6 +49,7 @@ export default class Image extends React.Component {
       src, iconLetter, className, iconSize, ...rest
     } = this.props;
     const { failed } = this.state;
+    const imgStr = src && startsWith(src, 'att-') ? `/attachments/${src}` : src;
 
     if (failed) {
       const style = {
@@ -73,7 +76,7 @@ export default class Image extends React.Component {
       return (
         <img
           src="/none.svg"
-          data-origin-url={src}
+          data-origin-url={imgStr}
           style={style}
           className={classnames(styles.img, className)}
           {...rest}
@@ -83,8 +86,8 @@ export default class Image extends React.Component {
 
     return (
       <img
-        src={src}
-        data-origin-url={src}
+        src={imgStr}
+        data-origin-url={imgStr}
         className={classnames(styles.img, className)}
         ref={c => {
           this.img = c;

src/pages/Dashboard/Apps/Card/index.jsx

@@ -2,7 +2,6 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { withRouter } from 'react-router';
-import _ from 'lodash';
 
 import Status from 'components/Status';
 import { Image } from 'components/Base';
@@ -13,16 +12,13 @@ import styles from './index.scss';
 @withRouter
 export default class AppCard extends Component {
   static propTypes = {
-    apiServer: PropTypes.string,
     children: PropTypes.node,
     className: PropTypes.string,
     data: PropTypes.object
   };
 
   render() {
-    const {
-      apiServer, className, data, t
-    } = this.props;
+    const { className, data, t } = this.props;
     const {
       app_id,
       icon,
@@ -32,10 +28,6 @@ export default class AppCard extends Component {
       status_time,
       app_version_types
     } = data;
-    let imgStr = icon;
-    if (icon && _.startsWith(icon, 'att-')) {
-      imgStr = `${apiServer.split('/v')[0]}/attachments/${icon}/raw`;
-    }
     const versions = app_version_types.split(',');
     return (
       <div
@@ -48,7 +40,7 @@ export default class AppCard extends Component {
           <Image
             className={styles.icon}
             iconLetter={name}
-            src={imgStr}
+            src={icon}
             iconSize={48}
             alt="logo"
           />

src/pages/Dashboard/Apps/MyApps/index.jsx

@@ -89,7 +89,7 @@ export default class Apps extends Component {
   }
 
   render() {
-    const { t, appStore, rootStore } = this.props;
+    const { t, appStore } = this.props;
     const { apps, searchWord } = appStore;
 
     const { pageLoading } = this.state;
@@ -102,14 +102,7 @@ export default class Apps extends Component {
         <Loading className={styles.page} isLoading={pageLoading}>
           {this.renderHeader()}
           <div className={styles.cards}>
-            {apps.map(item => (
-              <Card
-                apiServer={rootStore.apiServer}
-                key={item.app_id}
-                t={t}
-                data={item}
-              />
-            ))}
+            {apps.map(item => <Card key={item.app_id} t={t} data={item} />)}
           </div>
           {this.renderSearchEmpty()}
         </Loading>