我的组件成功地从 Django 后端获取信息（文本和图像），但无法显示图像。

相关：react.js 不显示获取的图像

我从 manifest.js 和 HTML 中删除了文件 192png，但它没有用，所以我按照建议将它们重新放回去。

import React, { useState, useEffect, Fragment} from 'react';
import axios from 'axios';
import Carousel from 'react-elastic-carousel';
import './Schools.css';
import Test from '../assets/images/back.jpg';

const schoolBreakPoints = [
    {width: 1, itemsToShow: 1 },
    {width: 550, itemsToShow: 2 },
    {width: 768, itemsToShow: 3 },
    {width: 1200, itemsToShow: 4 },
];

function Schools() {
    const [languageCenters, setLanguageCenters] = useState ([]);

    useEffect(() => {
        const config = {
            headers: {
                'Content-Type': 'application/json'
            }
        };

        const getLanguageCenters = async () => {
            try {
                const res = await axios.get(`${process.env.REACT_APP_API_URL}/api/partners/list/`, config);
                setLanguageCenters(res.data);
            }
            catch (err) {

            }
        };

        getLanguageCenters();
    }, []);

    const getAllLanguageCenters = () => {
        let allLanguageCenters = [];
        let results = [];

        languageCenters.map(languageCenter => {
            console.log(languageCenter.photo)
            return allLanguageCenters.push(
                <Fragment key={languageCenter.id}>
                    <div className='school__display'>
                        <img className='school__display__image' src={languageCenter.photo} alt='school logo' />
                    </div>
                    <h3 className='school__language__center'>{languageCenter.name}</h3>
                    <p className='school__course'>{languageCenter.country}</p>
                    <p className='school__course'>{languageCenter.language}</p>
                    <p className='school__course'>{languageCenter.course}</p>
                    <p className='school__about'>{languageCenter.note}</p>
                </Fragment>
            );
        });

        for (let i = 0; i < languageCenters.length; i += 20) {
            results.push(
                <div key={i} className='school__card__row'>
                    <Carousel breakPoints={schoolBreakPoints}>
                        <div className='school__card'>
                            {allLanguageCenters[i]}
                        </div>
                        <div className='school__card'>
                            {allLanguageCenters[i+1] ? allLanguageCenters[i+1] : null}
                        </div>
                        <div className='school__card'>
                            {allLanguageCenters[i+2] ? allLanguageCenters[i+2] : null}
                        </div>
                        <div className='school__card'>
                            {allLanguageCenters[i+3] ? allLanguageCenters[i+3] : null}
                        </div>
                        <div className='school__card'>
                            {allLanguageCenters[i+4] ? allLanguageCenters[i+4] : null}
                        </div>
                    </Carousel>
                </div>
            );
        }

        return results;
    };  

  return (
    <div className='schools'>
        <section className='schools__language__centers'>
            <div className='schools__row'>
                <h2 className='schools__subheading'>Language Centers</h2>
            </div>
            {getAllLanguageCenters()}
        </section>
    </div>
  )
}

export default Schools

开发者工具 > 全部；

开发者工具 > img ;

下面是我在浏览器上看到的，只有损坏的图标和 rel ；