React应用调用API获取的SVG国旗图片无法正常显示问题咨询

问题根因及修复方案 #

1. 核心问题：属性传递不匹配

Home组件调用CardComponent时传入的国旗字段名为image，但Card组件内部解构props时提取的字段名为flag，导致Card组件拿到的flag值为undefined，对应渲染位置自然为空。

2. 次要问题：API接口已废弃

原使用的https://restcountries.eu/rest/v2/all接口已停止服务，官方已更换域名和接口版本，返回字段结构也有调整。

3. 可选优化：无需额外依赖加载SVG

如果没有操作SVG内部DOM的需求，完全不需要使用react-svg组件，原生img标签加载SVG资源兼容性更好，不会产生额外的解析、跨域问题。

修改后可运行代码 #

Home组件代码

import React, {useState, useEffect} from 'react';
import axios from 'axios';
import { Container, Row } from 'react-bootstrap';
import CardComponent from '../components/Card';

// 更换为官方最新可用接口
const baseURL = 'https://restcountries.com/v3.1/all';

const Home = () => {
    const [ countries, setCountries ] = useState(null);

    useEffect(() => {
        axios.get(baseURL).then((res) => {
            setCountries(res.data);
        })
    }, []);

    return (
        <>
            <Container>
                <Row>
                    {countries && (
                        countries.map((country) => {
                            return <CardComponent 
                                        key={country.name.common} 
                                        title={country.name.common} 
                                        // 字段名和Card组件接收端保持一致
                                        flag={country.flags.svg}
                                        population={country.population} 
                                        region={country.region} 
                                        capital={country.capital?.[0] || '无'}
                                    />
                        })
                    )}
                </Row>
            </Container>
        </>
    )
}

export default Home;

Card组件代码

import React from 'react';
import { Card } from 'react-bootstrap';

const CardComponent = (props) => {
    const { title, flag, population, region, capital } = props;

    return (
        <Card>
            {/* 直接用img标签加载SVG，设置合适的展示样式 */}
            <img 
                src={flag} 
                alt={`${title}国旗`} 
                style={{width: '100%', height: '180px', objectFit: 'cover'}}
            />            
            <Card.Body>
                <Card.Title>{title}</Card.Title>
                <Card.Text>Population: <span id="Population">{population}</span><br/></Card.Text>                    
                <Card.Text>Region: <span id="Region">{region}</span><br/></Card.Text>
                <Card.Text>Capital: <span id="Capital">{capital}</span><br/></Card.Text>
            </Card.Body>
        </Card>
    )
}

export default CardComponent;

若需保留react-svg的补充配置 #

如果确实需要使用react-svg操作SVG内部元素，在保证属性传递正确的前提下，可以添加fallback和样式配置排查问题：

<ReactSVG 
  src={flag}
  fallback={<div style={{width: '100%', height: '180px', background: '#f5f5f5', display: 'flex', alignItems: 'center', justifyContent: 'center'}}>加载失败</div>}
  beforeInjection={(svg) => {
    svg.setAttribute('style', 'width: 100%; height: 180px; object-fit: cover;')
  }}
/>

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