[React오답노트] Styled Component를 활용하여 로컬 이미지 불러오기

이렇게 Header Footer 만들어야지~

< 목표 >
Header, Footer의 구현
Header -> 로고를 클릭하면 Landing 페이지로, 그 밑의 Navigation Bar를 클릭하면 각 페이지로
Footer -> 기능 x, 언급 안할 것임

Header Engine code

import { HeaderDiv, HeaderLogo, NavigationBar, ToAboutUs, ToInterpreation, ToConsulting } from "./headerStyle";
import {Link} from "react-router-dom";
function Header() {
    return (
        <HeaderDiv>
            
            <Link to="/">
                <HeaderLogo></HeaderLogo>
            </Link>

            <NavigationBar>

                <Link to="/aboutus">
                    <ToAboutUs>
                        About us
                    </ToAboutUs>
                </Link>

                <Link to="/interpretation">
                    <ToInterpreation>
                        Interpreation
                    </ToInterpreation>
                </Link>

                <Link to="/consulting">
                    <ToConsulting>
                        Consulting
                    </ToConsulting>
                </Link>
            </NavigationBar>
        </HeaderDiv>
    )
}

export default Header

Header style code

import styled from "styled-components";
// How to import img from outside
import headerLogo from "../resources/images/common/logo.jpeg"
export const HeaderDiv = styled.div`
    
`;

export const HeaderLogo = styled.div`
    
    height: 150px;
    width: 300px;
    margin:0 auto;
    margin-top: 30px;
    margin-bottom: 30px;
    // how to set background Img by using styled-components
    background-image: url(${headerLogo});
    background-repeat: no-repeat;
    background-size: contain;
`;

export const NavigationBar = styled.div`
    
    width: 100%;
    border-top: 3px solid #A67951;
    border-bottom: 3px solid #A67951;

    display: flex;
    justify-content: space-around;

    /* This means <Link> */
    a { 

        width:15%;
        display: block;

        text-align: center;
        text-decoration: none;
        font-size: 25px;
        color: #000;
        
        transition: 1s;
    }

    a:hover{
        background-color: #A67951;
        color: #fff;
        border-radius: 10px;
    }

`;

export const ToAboutUs = styled.p`
    
`;

export const ToInterpreation = styled.p`
    
`;

export const ToConsulting = styled.p`
    
`;

문제의 발생

간단하게 Link to 를 통해 라우팅 해주면 끝날 줄 알았는데,

생각해보니 로컬 이미지 소스를 어떻게 가져와야 하는지 모르겠다는 문제가 발생했다.

해결 방안

background-img 속성을 먹일 때 url() 을 펼치는 것은 맞으나, ()속에 백날 주소 적어봐야 동작하지 않는다.

이 안에 들어가는 이미지 파일을 미리 import 해 주어야 한다. 

해결 코드

// How to import img from outside
import headerLogo from "../resources/images/common/logo.jpeg"

// how to set background Img by using styled-components
background-image: url(${headerLogo});