From 91fc3c7aab39348a351987e10d39e68fec473229 Mon Sep 17 00:00:00 2001
From: Matias Lang <matias.la@exodus.io>
Date: Wed, 11 May 2022 17:23:35 -0300
Subject: [PATCH] [fix] Encode URL in background-image CSS property

Solution based on
https://stackoverflow.com/questions/25613552/how-should-i-escape-image-urls-for-css

Close #2286
---
 packages/react-native-web/src/exports/Image/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-native-web/src/exports/Image/index.js b/packages/react-native-web/src/exports/Image/index.js
index 4c39aa6e..0f895808 100644
--- a/packages/react-native-web/src/exports/Image/index.js
+++ b/packages/react-native-web/src/exports/Image/index.js
@@ -193,7 +193,7 @@ const Image: React.AbstractComponent<ImageProps, React.ElementRef<typeof View>>
     const selectedSource = shouldDisplaySource ? source : defaultSource;
     const displayImageUri = resolveAssetUri(selectedSource);
     const imageSizeStyle = resolveAssetDimensions(selectedSource);
-    const backgroundImage = displayImageUri ? `url("${displayImageUri}")` : null;
+    const backgroundImage = displayImageUri ? `url("${encodeURI(displayImageUri)}")` : null;
     const backgroundSize = getBackgroundSize();
 
     // Accessibility image allows users to trigger the browser's image context menu