ICU-596 Added support for relative image URLs (#1353)

app/components/markdown/markdown_image/index.js

@@ -0,0 +1,16 @@
+// Copyright (c) 2017-present Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import {connect} from 'react-redux';
+
+import {getCurrentUrl} from 'mattermost-redux/selectors/entities/general';
+
+import MarkdownImage from './markdown_image';
+
+function mapStateToProps(state) {
+    return {
+        serverURL: getCurrentUrl(state)
+    };
+}
+
+export default connect(mapStateToProps)(MarkdownImage);

app/components/markdown/markdown_image/markdown_image.js

@@ -31,6 +31,7 @@ export default class MarkdownImage extends React.Component {
         children: PropTypes.node,
         linkDestination: PropTypes.string,
         onLongPress: PropTypes.func,
+        serverURL: PropTypes.string.isRequired,
         source: PropTypes.string.isRequired,
         errorTextStyle: CustomPropTypes.Style
     };
@@ -53,7 +54,7 @@ export default class MarkdownImage extends React.Component {
     }
 
     componentWillMount() {
-        this.loadImageSize(this.props.source);
+        this.loadImageSize(this.getSource());
     }
 
     componentDidMount() {
@@ -68,7 +69,8 @@ export default class MarkdownImage extends React.Component {
                 failed: false
             });
 
-            this.loadImageSize(nextProps.source);
+            // getSource also depends on serverURL, but that shouldn't change while this is mounted
+            this.loadImageSize(this.getSource(nextProps));
         }
     }
 
@@ -76,6 +78,16 @@ export default class MarkdownImage extends React.Component {
         this.mounted = false;
     }
 
+    getSource = (props = this.props) => {
+        let source = props.source;
+
+        if (source.startsWith('/')) {
+            source = props.serverURL + '/' + source;
+        }
+
+        return source;
+    };
+
     loadImageSize = (source) => {
         Image.getSize(source, this.handleSizeReceived, this.handleSizeFailed);
     };
@@ -180,7 +192,7 @@ export default class MarkdownImage extends React.Component {
                 // React Native complains if we try to pass resizeMode as a style
                 image = (
                     <Image
-                        source={{uri: this.props.source}}
+                        source={{uri: this.getSource()}}
                         resizeMode='contain'
                         style={[{width, height}, style.image]}
                     />