React.js不显示从Django获取的图像

Question

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

相关：react.js doesn't display fetched image

我从manifest.js和HTML中删除了192 put文件，但是它没有工作，所以我再次按建议将它们放回去。

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；

​

​

Answer 1

当我通过Django服务器使用Django中的build文件夹时，我设法找到了一个漫游，图像显示得非常完美。这对我来说没问题，因为我正在构建Django项目，但这很烦人，为什么React不能显示它们。