diff --git a/src/components/ReportActionItem/MoneyRequestView.js b/src/components/ReportActionItem/MoneyRequestView.js
index 4b69f14213a22..ee852d5c146aa 100644
--- a/src/components/ReportActionItem/MoneyRequestView.js
+++ b/src/components/ReportActionItem/MoneyRequestView.js
@@ -170,6 +170,7 @@ function MoneyRequestView({report, betas, parentReport, policyCategories, should
                             <ReportActionItemImage
                                 thumbnail={receiptURIs.thumbnail}
                                 image={receiptURIs.image}
+                                isLocalFile={receiptURIs.isLocalFile}
                                 transaction={transaction}
                                 enablePreviewModal
                             />
diff --git a/src/components/ReportActionItem/ReportActionItemImage.js b/src/components/ReportActionItem/ReportActionItemImage.js
index d5f9f7ed06b83..b5711d43abb99 100644
--- a/src/components/ReportActionItem/ReportActionItemImage.js
+++ b/src/components/ReportActionItem/ReportActionItemImage.js
@@ -18,7 +18,7 @@ import ROUTES from '@src/ROUTES';
 
 const propTypes = {
     /** thumbnail URI for the image */
-    thumbnail: PropTypes.string,
+    thumbnail: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 
     /** URI for the image or local numeric reference for the image  */
     image: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
@@ -28,12 +28,16 @@ const propTypes = {
 
     /* The transaction associated with this image, if any. Passed for handling eReceipts. */
     transaction: transactionPropTypes,
+
+    /** whether thumbnail is refer the local file or not */
+    isLocalFile: PropTypes.bool,
 };
 
 const defaultProps = {
     thumbnail: null,
     transaction: {},
     enablePreviewModal: false,
+    isLocalFile: false,
 };
 
 /**
@@ -42,7 +46,7 @@ const defaultProps = {
  * and optional preview modal as well.
  */
 
-function ReportActionItemImage({thumbnail, image, enablePreviewModal, transaction}) {
+function ReportActionItemImage({thumbnail, image, enablePreviewModal, transaction, isLocalFile}) {
     const {translate} = useLocalize();
     const imageSource = tryResolveUrlFromApiRoot(image || '');
     const thumbnailSource = tryResolveUrlFromApiRoot(thumbnail || '');
@@ -56,7 +60,7 @@ function ReportActionItemImage({thumbnail, image, enablePreviewModal, transactio
                 <EReceiptThumbnail transactionID={transaction.transactionID} />
             </View>
         );
-    } else if (thumbnail) {
+    } else if (thumbnail && !isLocalFile) {
         receiptImageComponent = (
             <ThumbnailImage
                 previewSourceURL={thumbnailSource}
@@ -68,7 +72,7 @@ function ReportActionItemImage({thumbnail, image, enablePreviewModal, transactio
     } else {
         receiptImageComponent = (
             <Image
-                source={{uri: image}}
+                source={{uri: thumbnail || image}}
                 style={[styles.w100, styles.h100]}
             />
         );
diff --git a/src/components/ReportActionItem/ReportActionItemImages.js b/src/components/ReportActionItem/ReportActionItemImages.js
index e44e27bb7ec04..21d7c5fa3488c 100644
--- a/src/components/ReportActionItem/ReportActionItemImages.js
+++ b/src/components/ReportActionItem/ReportActionItemImages.js
@@ -15,7 +15,7 @@ const propTypes = {
     /** array of image and thumbnail URIs */
     images: PropTypes.arrayOf(
         PropTypes.shape({
-            thumbnail: PropTypes.string,
+            thumbnail: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
             image: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
             transaction: transactionPropTypes,
         }),
@@ -74,7 +74,7 @@ function ReportActionItemImages({images, size, total, isHovered}) {
 
     return (
         <View style={[styles.reportActionItemImages, hoverStyle, heightStyle]}>
-            {_.map(shownImages, ({thumbnail, image, transaction}, index) => {
+            {_.map(shownImages, ({thumbnail, image, transaction, isLocalFile}, index) => {
                 const isLastImage = index === numberOfShownImages - 1;
 
                 // Show a border to separate multiple images. Shown to the right for each except the last.
@@ -88,6 +88,7 @@ function ReportActionItemImages({images, size, total, isHovered}) {
                         <ReportActionItemImage
                             thumbnail={thumbnail}
                             image={image}
+                            isLocalFile={isLocalFile}
                             transaction={transaction}
                         />
                         {isLastImage && remaining > 0 && (
diff --git a/src/libs/ReceiptUtils.ts b/src/libs/ReceiptUtils.ts
index 5ee177b8f8319..737e5ddc2e311 100644
--- a/src/libs/ReceiptUtils.ts
+++ b/src/libs/ReceiptUtils.ts
@@ -11,8 +11,9 @@ import * as FileUtils from './fileDownload/FileUtils';
 
 type ThumbnailAndImageURI = {
     image: ImageSourcePropType | string;
-    thumbnail: string | null;
+    thumbnail: ImageSourcePropType | string | null;
     transaction?: Transaction;
+    isLocalFile?: boolean;
 };
 
 type FileNameAndExtension = {
@@ -65,7 +66,7 @@ function getThumbnailAndImageURIs(transaction: Transaction, receiptPath: string
         image = ReceiptSVG;
     }
 
-    return {thumbnail: null, image};
+    return {thumbnail: image, image: path, isLocalFile: true};
 }
 
 // eslint-disable-next-line import/prefer-default-export