[@mantine/core] BackgroundImage: Fix image not loading if given image…

… url contains whitespace (mantinedev#4715) * Add double quotes to wrap src for backgroundImage * Add double quotes to wrap src for backgroundImage property
arel · Sep 13, 2023 · 64698f0 · 64698f0
1 parent 890c0d8
commit 64698f0
Show file tree

Hide file tree

Showing 4 changed files with 4 additions and 4 deletions.
diff --git a/docs/src/components/HomePage/Banner/Banner.styles.ts b/docs/src/components/HomePage/Banner/Banner.styles.ts
@@ -68,7 +68,7 @@ export default createStyles((theme) => ({
     minHeight: rem(500),
     width: rem(800),
     flex: 1,
-    backgroundImage: `url(${banner})`,
+    backgroundImage: `url('${banner}')`,
     backgroundSize: 'auto 100%',
     backgroundRepeat: 'no-repeat',
     backgroundPosition: 'right',

diff --git a/src/mantine-core/src/BackgroundImage/BackgroundImage.styles.ts b/src/mantine-core/src/BackgroundImage/BackgroundImage.styles.ts
@@ -15,7 +15,7 @@ export default createStyles((theme, { radius, src }: BackgroundImageStylesParams
     border: 0,
     textDecoration: 'none',
     color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.black,
-    backgroundImage: `url(${src})`,
+    backgroundImage: `url('${src}')`,
     borderRadius: theme.fn.radius(radius),
   },
 }));
diff --git a/src/mantine-demos/src/demos/carousel/Carousel.demo.cards.tsx b/src/mantine-demos/src/demos/carousel/Carousel.demo.cards.tsx
@@ -52,7 +52,7 @@ function Card({ image, title, category }: CardProps) {
       shadow="md"
       p="xl"
       radius="md"
-      sx={{ backgroundImage: \`url(\${image})\` }}
+      sx={{ backgroundImage: \`url('\${image}')\` }}
       className={classes.card}
     >
       <div>

diff --git a/src/mantine-demos/src/demos/carousel/_card.tsx b/src/mantine-demos/src/demos/carousel/_card.tsx
@@ -43,7 +43,7 @@ export function Card({ image, title, category }: CardProps) {
       shadow="md"
       p="xl"
       radius="md"
-      sx={{ backgroundImage: `url(${image})` }}
+      sx={{ backgroundImage: `url('${image}')` }}
       className={classes.card}
     >
       <div>