[2022.07.11] 이미지 불러오기 경로 오류

디자인 작업 후 코딩 시작

 

footer 작업중 에러 사항

import React from 'react';
import styled from 'styled-components';
import LogoImg from './../../../img/zetaplan_splite.png'

const Footer = () => {
  return (
    <div>
      <FooterBox>
        <img src={LogoImg} alt="logo-img" width="50px"/>
        <div>
          <ul>
            {/* <FooterSns style={{background: 'url(/static/media/zetaplan_splite.34aa9da89296aded1967.png)'}}/> */}
            <FooterSns style={{background: `url(${LogoImg})`}}/>
            <li></li>
            <li></li>
          </ul>
        </div>
      </FooterBox>
    </div>
  );
};


const FooterBox = styled.div`
  background: #1C1C1C;
  color:#fff;
  font-size:1.8rem;
`;

const FooterSns=styled.li`
  background: url('./../../../img/zetaplan_splite.png') no-repeat -13px -10px;
	width: 417px;
  background:red;
`

export default Footer;

 

에러: import로 위에 이미지 파일 경로를 불러오고 style에도 똑같은 경로로 불러오려고 했으나 오류가 남

import LogoImg from './../../../img/zetaplan_splite.png'

 

해결:

 <ul>
   {/* <FooterSns style={{background: 'url(/static/media/zetaplan_splite.34aa9da89296aded1967.png)'}}/> */}
    <FooterSns style={{background: `url(${LogoImg})`}}/>
</ul>

위 방법: 크롬검사에서 위에 나타난 이미지의 해당 경로를 그대로 복사해서 붙여넣자 적용됨

아래 방법: 같은 파일을 불러올 것이기 때문에 해당 컴포넌트를 이용하자 이미지가 불러와졌다.