질문있습니다!!!

안녕하세요 :) !!! mainimage에서 이미지불러오는데 이미지가 화면에 표시되지않습니다.

props로 로그찍어보고 거기에 나오는 주소로 검색하면 이미지가 잘나오는데

왜 안뜨는지 궁금해요...ㅠㅠ title 명도 분명 가져오는데 안가져오더라구요!

-- LandingPage.js

import React,{useEffect,useState} from 'react'
import { FaCode } from "react-icons/fa";
import {API_URL,API_KEY,IMAGE_BASE_URL} from '../../Config'
import MainImage from './Sections/MainImage'

function LandingPage() {

    const[Movies,setMovies]=useState([])
    const [MainMovieImage,setMainMovieImage]=useState(null)

    useEffect(()=>{
        const endpoint=`${API_URL}movie/popular?api_key=${API_KEY}&language=en-US&page=1`;
 
        fetch(endpoint)
        .then(response=>response.json())
        .then(response=>{
            console.log(response)
            setMovies([...response.results])
            setMainMovieImage(response.results[0])
        })


    },[])

    return (
        <div style={{width:'100%',margin:'0'}}>
            {/*  Main Image */}
            {MainMovieImage && 
        <MainImage image={`${IMAGE_BASE_URL}w1280${MainMovieImage.backdrop_path}`}
        title={MainMovieImage.original_title}
        text={MainMovieImage.overview}
        />
                 }
         <div style={{ width:'85%', margin:'1rem auto'}}>
            <h2>Movies by latest</h2>
            <hr/>

            /* Movie Grid Cards */

        </div>
        <div style={{ display:'flex', justifyContent:'center'}}>
            <button>Load More</button>
        </div></div>
    );
};

export default LandingPage
-- MainImage.js
import React from 'react';
function MainImage(props){ 
    return(
        <div style={{background:`linear-gradient(to bottom,rgba(0,0,0,0)
        39%,rgba(0,0,0,0)
        41% rgba(0,0,0,0.65)
        100%),
        url("${props.image}"),#1c1c1c`,
            height:'500px',
            backgroundSize:'100%,cover',
            backgroundPostition:'center,center',
            width:'100%',
            position:'relative'
            }}> 
            <div>
                <div style={{position:'absolute', maxWidth:'500px', bottom:'2rem', marginLeft:'2rem'}}>
                    <h2 style={{color:'white'}}>{props.title} </h2>
                    <p style={{color:'white',fontSize:'1rem'}}>{props.text}</p>
                </div>
            </div>
        </div>    
    )
}

export default MainImage

import React, {useEffect, useState} from 'react'
import { FaCode } from "react-icons/fa";

import {API_URL, API_KEY, IMAGE_BASE_URL} from '../../Config'
import MainImage from './Sections/MainImage';

function LandingPage() {

    const [movies, setMovies] = useState([])
    const [MainMovieImage, setMainMovieImage] = useState(null)

    useEffect(() => {
        const endpoint = `${API_URL}movie/popular?api_key=${API_KEY}&language=en-US&page=1`;

        fetch(endpoint)
        .then(response => response.json())
        .then(response => {
            setMovies([response.results])
            setMainMovieImage(response.results[0])
        })
    }, [])

    return (
        <div style={{ width: '100%', margin: '0' }}>
            { MainMovieImage && 
                <MainImage 
                    image={`${IMAGE_BASE_URL}w1280${MainMovieImage.backdrop_path}`}
                    title={MainMovieImage.original_title}
                    text={MainMovieImage.overview}
                />
            }

            <div style={{ width: '85%', margin: '1rem auto' }}>
                <h2>Movies by latest</h2>
                <hr />
            </div>

            <div style={{display: 'flex', justifyContent: 'center'}}>
                <button>Load More</button>
            </div>
        </div>
    )
}

export default LandingPage

복붙해보세요 저도 같은 증상이었는데 다시 처음부터 타이핑하니 해결되었습니다.

무슨 문제인지는 모르겠네요...

인프런 커뮤니티 질문&답변