inflearn logo
강의

강의
N
챌린지

챌린지
멘토링

멘토링
N
클립

클립
로드맵

로드맵
지식공유

따라하며 배우는 노드, 리액트 시리즈 - 영화 사이트 만들기

질문있습니다!!!

239

cptsunday44

작성한 질문수 2

0

안녕하세요 :) !!!  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

express mongodb react 웹앱 nodejs

답변 0

에러서 요렇게만 해보세요

0

228

1

antd Menu 질문

0

258

1

movieTitle

0

218

1

npm run dev 연결이 안됩니다ㅜㅜ

0

410

1

npm run dev 오류

0

855

1

403 forbidden error

0

1067

2

npm run dev 오류

0

696

1

모듈이 없다는데요

0

1277

1

npm run dev 실행시 오류

0

5368

1

504 Gateway Timeout Error

0

1448

1

컴파일 에러 관련 문의

0

504

1

npm run dev 오류

0

760

1

이미지가 안떠요...

0

369

2

npm run dev 실행하고 인증이 안되는거 같아요

0

531

1

cd client에서 npm install 오류

0

1418

1

npm run dev시 localhost가 자꾸 3000으로 연결됩니다

0

972

1

Netlify + AWS Elastic Beanstalk 를 이용한 배포

1

1785

1

[nodemon] app crashed - waiting for file changes before starting... Error occurred while proxying request localhost:3000/api/hello to http://localhost:5000/ 해결법

0

460

0

지금 듣기엔 안되는 강의일까요?

0

718

1

사진이 2개 2개씩 다른줄에 나와요 ㅠㅠ

0

428

1

비동기 처리가 영상과 다르게 됩니다..

0

247

0

#2강 npm install

0

768

4

LandingPage.js 내 useState(null) 이용하는 이유

0

226

0

client 부분에 App.js 와 Config.js 위치가 다른데 상관없는 것인가요?

0

384

1