目前无法在 React 应用程序中显示来自 API 的 svg 图像答案

【问题标题】：Currently unable to display svg images from API in React app目前无法在 React 应用程序中显示来自 API 的 svg 图像
【发布时间】：2021-10-24 06:30:09
【问题描述】：

我目前遇到的问题是显示我从国家/地区的 API 获得的 svg 图像。现在它们在 HTML 中显示为空 div 并且没有错误。我也在使用 ReactSVG 包，但仍然没有运气。

下面是进行 API 调用的 Home 组件和提供内容的 Card 组件：

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.eu/rest/v2/all';

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

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

    return (
        <>
            <Container>
                <Row>
                    {countries && (
                        countries.map((country) => {
                            console.log(country.flag)
                            return <CardComponent key={country.name} 
                                        title={country.name} 
                                        image={country.flag}
                                        population={country.population} 
                                        region={country.region} 
                                        capital={country.capital}/>
                        })
                    )}
                </Row>
            </Container>
        </>
    )
}

export default Home;



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


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


    return (
        <Card>
            <ReactSVG src={flag}/>            
            <Card.Body>
                <Card.Title>{title}</Card.Title>
                <Card.Text>Population: <span id="Population">{population}</span><br></br></Card.Text>                    
                <Card.Text>Region: <span id="Region">{region}</span><br></br></Card.Text>
                <Card.Text>Capital: <span id="Capital">{capital}</span><br></br></Card.Text>
            </Card.Body>
        </Card>
    )
}

export default CardComponent;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

这里还有一个链接到我的这个项目的 Git 存储库https://github.com/codejohnson89/react-countries

【问题讨论】：

您在图像中输入了 flag。所以你必须在 CardComponent 中使用 image 变量。请检查以下答案。
@Boris 谢谢！我知道像这样愚蠢的事情会阻止我。谢谢你的收获！
别担心，如果它对你有帮助，请投票给我的答案。 :)

标签： javascript reactjs image svg

【解决方案1】：

在您的代码中，有一些错误。请检查此代码。

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.eu/rest/v2/all';

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

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

    return (
        <>
            <Container>
                <Row>
                    {countries && (
                        countries.map((country) => {
                            console.log(country.flag)
                            return <CardComponent key={country.name} 
                                        title={country.name} 
                                        image={country.flag}
                                        population={country.population} 
                                        region={country.region} 
                                        capital={country.capital}/>
                        })
                    )}
                </Row>
            </Container>
        </>
    )
}

export default Home;



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


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


    return (
        <Card>
            <img src={image} alt="title" width="80"/>            
            <Card.Body>
                <Card.Title>{title}</Card.Title>
                <Card.Text>Population: <span id="Population">{population}</span><br></br></Card.Text>                    
                <Card.Text>Region: <span id="Region">{region}</span><br></br></Card.Text>
                <Card.Text>Capital: <span id="Capital">{capital}</span><br></br></Card.Text>
            </Card.Body>
        </Card>
    )
}

export default CardComponent;

【讨论】：