如何解决Patternfly Horizontal Split卡片背景图片不显示问题

问题场景 #

按照Patternfly v4水平拆分卡片的示例实现时，背景图片始终无法正常显示，尝试了直接写相对路径和导入图片两种方式都无效。

原失效代码 #

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)'
                                    }}
                                />
                            </Grid>
                        </Card>

                        <div class="col d-flex justify-content-center">
                            <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>
                        </div>
                    </article>
                </section>
            </div>
            <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
            <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js" integrity="sha384-IDwe1+LCz02ROU9k972gdyvl+AESN10+x7tBKgc9I5HFtuNz0wWnPclzo6p9vxnk" crossorigin="anonymous"></script>
        </>
    );
}

失效原因分析 #

1. 相对路径适配问题：使用backgroundImage: 'url(../images/dog.jpg)'时，React项目构建后，静态资源路径会被打包工具（如Webpack）重新处理，CSS中的相对路径是相对于最终生成的CSS文件位置，而非组件文件的位置，导致路径指向错误。
2. 内联样式语法错误：导入图片后写backgroundImage: {dog}是错误的，正确写法应为backgroundImage: url(${dog})``——需要把导入的资源URL用模板字符串包裹成CSS的url()格式，直接写对象语法不符合React内联样式规则。
3. 冗余结构干扰：原代码中存在重复的<Card>、<Grid>组件，还额外引入了Bootstrap脚本，可能造成布局冲突，影响背景图容器的正常渲染。

可行解决方案 #

改用<img>标签配合Patternfly的Split组件实现水平拆分，避开背景图路径适配问题。

可行代码 #

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

const CardHorizontalSplitDemo = () => {
  return (
    <Card id="card-demo-horizontal-split-example" isFlat>
      <Grid md={6}>
        <Split>
          <SplitItem>
            <img src={dog} alt="Pet available for adoption" /> 
          </SplitItem>
          <SplitItem>
            <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>
          </SplitItem>
        </Split>
      </Grid>
    </Card>
  );
};

export default CardHorizontalSplitDemo;

说明 #

直接用<img>标签引入导入的图片资源，能确保路径被打包工具正确解析；同时Patternfly的Split组件能原生实现水平拆分布局，避免了背景图带来的路径适配麻烦。

内容的提问来源于stack exchange，提问作者Tyro