-
질문 & 답변
카테고리
-
세부 분야
풀스택
-
해결 여부
미해결
질문있습니다!!!
20.09.24 20:54 작성 조회수 137
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
답변을 작성해보세요.
0
dnfwlxo11
2020.12.28
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
복붙해보세요 저도 같은 증상이었는데 다시 처음부터 타이핑하니 해결되었습니다.
무슨 문제인지는 모르겠네요...
답변 1