react.js 不显示获取的图像

Question

My component successfully fetches info (text and image) from Django backend but fails to display the image.

when I checked the console and I saw the following error: Error while trying to use the following icon from the Manifest: http://localhost:3000/logo192.png (Download error or resource isn't a valid image)

I removed logo192.png & logo512.png from manifest.json and from HTML but still, the image doesn't display.

React component;

import React, { useState, useEffect, Fragment} from 'react';
import axios from 'axios';
import './Schools.css';

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.course}</p>
                    <p className='school__about'>{languageCenter.note}</p>
                </Fragment>
            );
        });

        for (let i = 0; i < languageCenters.length; i += 3) {
            results.push(
                <div key={i} className='school__card__row'>
                    <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>
            );
        }

        return results;
    };  

  return (
    <div className='schools'>
        <section className='schools__language__centers'>
            <div className='schools__row'>
                <h2 className='schools__subheading'>Here are our schools</h2>
            </div>
            {getAllLanguageCenters()}
        </section>
    </div>
  )
}

export default Schools

console.log(languageCenter);

{id: 2, name: 'UCI', email: '', photo: '/media/partners/2022/06/07/uk.png', phone: '', …}
course: "Foundation"
create_date: "2022-06-07T11:57:29+02:00"
deposit: "free"
email: ""
id: 2
language: "English"
name: "UCI"
note: ""
phone: ""
photo: "/media/partners/2022/06/07/uk.png"
[[Prototype]]: Object

Answer 1

Keep your logo912.png and logo512.png in public folder.

May be you deleted that image from public/ folder OR you removed icons: [] from manifest.json in public/