diff --git a/app/components/markdown/markdown_image/index.js b/app/components/markdown/markdown_image/index.js new file mode 100644 index 000000000..493f7e5f6 --- /dev/null +++ b/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); diff --git a/app/components/markdown/markdown_image.js b/app/components/markdown/markdown_image/markdown_image.js similarity index 91% rename from app/components/markdown/markdown_image.js rename to app/components/markdown/markdown_image/markdown_image.js index 68d398a4b..9ceefd529 100644 --- a/app/components/markdown/markdown_image.js +++ b/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 = (