diff --git a/src/components/AttachmentCarousel/index.js b/src/components/AttachmentCarousel/index.js index e1edfb784d72..cf79b1d8fd77 100644 --- a/src/components/AttachmentCarousel/index.js +++ b/src/components/AttachmentCarousel/index.js @@ -14,6 +14,7 @@ import * as Report from '../../libs/actions/Report'; import AttachmentView from '../AttachmentView'; import addEncryptedAuthTokenToURL from '../../libs/addEncryptedAuthTokenToURL'; import canUseTouchScreen from '../../libs/canUseTouchscreen'; +import Config from '../../CONFIG'; import CONST from '../../CONST'; import ONYXKEYS from '../../ONYXKEYS'; import reportPropTypes from '../../pages/reportPropTypes'; @@ -100,6 +101,13 @@ class AttachmentCarousel extends React.Component { let page; const actions = ReportActionsUtils.getSortedReportActions(_.values(this.props.reportActions), true); + // this is used to match the initial image URL from props in a config environment. + // Eg: while using Ngrok the image path is from an Ngrok URL and not an Expensify URL. + const propsSourceURL = this.props.sourceURL.replace( + Config.EXPENSIFY.EXPENSIFY_URL, + Config.EXPENSIFY.URL_API_ROOT, + ); + /** * Calling reducer will filter out attachments, * determine the index of opened attachment, @@ -113,11 +121,20 @@ class AttachmentCarousel extends React.Component { // matchAll captured both source url and name of the attachment if (matches.length === 2) { - const [sourceURL, name] = _.map(matches, m => m[2]); + const [originalSourceURL, name] = _.map(matches, m => m[2]); + + // Update the image URL so the images can be accessed depending on the config environment. + // Eg: while using Ngrok the image path is from an Ngrok URL and not an Expensify URL. + const sourceURL = originalSourceURL.replace( + Config.EXPENSIFY.EXPENSIFY_URL, + Config.EXPENSIFY.URL_API_ROOT, + ); + if ((this.state.sourceURL && sourceURL.includes(this.state.sourceURL)) - || (!this.state.sourceURL && sourceURL.includes(this.props.sourceURL))) { + || (!this.state.sourceURL && sourceURL.includes(propsSourceURL))) { page = attachments.length; } + attachments.push({sourceURL, file: {name}}); } }