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

Posted 2023-03-28

【中文标题】目前无法在 React 应用程序中显示来自 API 的 svg 图像

【英文标题】：Currently unable to display svg images from API in React app

【发布时间】：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 谢谢！我知道像这样愚蠢的事情会阻止我。谢谢你的收获！

别担心，如果它对你有帮助，请投票给我的答案。 :)

【参考方案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  />            
            <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;