[2022.07.13] react 이미지 경로 불러오기 / SCSS에서.active시 before적용 오류

오류1. 이미지 경로를 불러올 때 오류가 남

해결:

(배경이미지로 넣을시)

1.배경이미지로 불러오는 경로를 제대로 설정한다.

.ztCircle{
      background: url(./../../img/zeta/zeta_circle.png)no-repeat;
      background-size: contain;
      width: 500px;
      height: 400px;
}

 

(img에 src로 불러올 때)

2: 경로를 올바르게 설정했음에도 오류가 남

-> 크롬 검사에서 경로가 다른 주소(http://localhost:3000/static/media/zeta_circle.)로 자동 변경되어 있는 걸 확인

->상대경로 앞에 아래와 같이 코드를 추가하자 올바르게 파일을 불러올 수 있었음 (참고사이트)

<img src={require('./../../img/zeta/zeta_circle.png')} />

 

---

 

오류2. SCSS 에서 active됐을 때 before에 모양이 추가되도록 설정하는 것에서 오류가 남

해결: 아래 코드와 같이 적어주자 해결됨

&.active::before{
 content: "";
 display: inline-block;
 background: #94151C;
 width: 9.4rem;
 height: 0.2rem;
 vertical-align: middle;
 margin-right: 3.7rem;
}