How can I get a background image to show using Patternfly?-CodePudding

I was following this guide https://www.patternfly.org/v4/components/card/react-demos using their "Horizontal split" guide to try to get the desired effect but I am unable to get the background image to display properly even though the path to the image is correct.

I have tried to put the name of the image in curly brackets the way you do for normal images and also imported it but I am still unable to get the image to display. I am unsure of how to get the image to show up for this section. Here is the code I have so far

import { Card, CardTitle, CardBody, CardFooter, Grid, GridItem, Button } from '@patternfly/react-core';
import dog from '../images/dog.jpg';

export default function adoptionReady() {
    return (
       
        <>
      <h1>Pets Ready For Adoption</h1>
<div className="container">
<section>
    <article>
    <br></br>
<br></br>


    <Card id="card-demo-horizontal-split-example" isFlat>
      <Grid md={6}>
        <GridItem
          style={{
            minHeight: '200px',
            backgroundPosition: 'center',
            backgroundSize: 'cover',
            backgroundImage: 'url(../images/dog.jpg)'

           } }
        />


<div >
    <Card id="card-demo-horizontal-split-example" isFlat>
      <Grid md={6}>
        <GridItem
          style={{
            minHeight: '200px',
            backgroundPosition: 'center',
            backgroundSize: 'cover',
            backgroundImage: {dog}
          }}
        />
        <GridItem>
          <CardTitle>Headline</CardTitle>
          <CardBody>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse arcu purus, lobortis nec euismod eu,
            tristique ut sapien. Nullam turpis lectus, aliquet sit amet volutpat eu, semper eget quam. Maecenas in
            tempus diam. Aenean interdum velit sed massa aliquet, sit amet malesuada nulla hendrerit. Aenean non
            faucibus odio. Etiam non metus turpis. Praesent sollicitudin elit neque, id ullamcorper nibh faucibus eget.
          </CardBody>
          <CardFooter>
            <Button variant="tertiary">Call to action</Button>
          </CardFooter>
        </GridItem>
      </Grid>
    </Card>

  
        {/* <figure>
            <figcaption></figcaption>
        </figure> */}

</div>

</article>


</section>
</div>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-IDwe1 LCz02ROU9k972gdyvl AESN10 x7tBKgc9I5HFtuNz0wWnPclzo6p9vxnk" crossorigin="anonymous"></script>
  



        <>

        </></>
    );


  }

Here is the example code I am trying to follow this url shows the end result that I am unable to duplicate https://www.patternfly.org/v4/components/card/react-demos/horizontal-split/

I was able to resolve the issue by inputting different code that split the content between it's containers, then all I had to just is just add a regular image like normal. Still not sure why the original code would not work though.

Leaving it here in case anyone needs it in the future when using pattern fly horizontal card tutorial.

import React from 'react';
import { Card, CardTitle, CardBody, CardFooter, Grid, GridItem, Button } from '@patternfly/react-core';

CardHorizontalSplitDemo = () => {
  return (
    <Card id="card-demo-horizontal-split-example" isFlat>
      <Grid md={6}>
            <Card id="card-demo-horizontal-split-example" isFlat>
      <Grid md={6}>


          <Split>
          <SplitItem>
          <img src={dog} alt=" " /> 
          </SplitItem>
        </Split>
        <GridItem>
          <CardTitle>Headline</CardTitle>
          <CardBody>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse arcu purus, lobortis nec euismod eu,
            tristique ut sapien. Nullam turpis lectus, aliquet sit amet volutpat eu, semper eget quam. Maecenas in
            tempus diam. Aenean interdum velit sed massa aliquet, sit amet malesuada nulla hendrerit. Aenean non
            faucibus odio. Etiam non metus turpis. Praesent sollicitudin elit neque, id ullamcorper nibh faucibus eget.
          </CardBody>
          <CardFooter>
            <Button variant="tertiary">Call to action</Button>
          </CardFooter>
        </GridItem>
      </Grid>
    </Card>
  );
};

CodePudding user response：

Example code maybe helpful

import React from 'react';
import { ImageBackground, StyleSheet } from 'react-native';

const BackgroundImage = ({ children }) => {
  return (
    <ImageBackground
      source={require('path/to/your/image.jpg')}
      style={styles.backgroundImage}
    >
      {children}
    </ImageBackground>
  );
};

const styles = StyleSheet.create({
  backgroundImage: {
    flex: 1,
    resizeMode: 'cover',
    justifyContent: 'center'
  },
});

export default BackgroundImage;

You can then use this BackgroundImage component

import BackgroundImage from './BackgroundImage';

const YourComponent = () => {
  return (
    <BackgroundImage>
      <!-- your content here -->
    </BackgroundImage>
  );
};

CodePudding user response：

Solution was to add a split instead of a grid item for the image.

      <Grid md={6}>
            <Card id="card-demo-horizontal-split-example" isFlat>
      <Grid md={6}>


          <Split>
          <SplitItem>
          <img src={dog} alt=" " /> 
          </SplitItem>
        </Split>