(netlify) 배포 후 이미지 엑박 해결

문제

export const infoList = [
    {
        img:"../img/telephone-icon.png",
        info:"이름",
        detail:"메롱이닷"
    },
    {
        img:"../img/birth-icon.png",
        info:"생년월일",
        detail:"1993.00.00"
    }
]

이런식으로 데이터를 담아두고

{infoList.map((info, index) => (<AboutMeList key={index} infos={info} />))}

map을 사용하여 하나씩 보여주게끔 하였다.

 

이미지 엑박

하지만 !! 분명 local에서는 잘 돌아갔는데 netflify 배포 url에 들어가보니 위 그림처럼 이미지 엑박이 떴다

 

 

해결방법

엑박 뜰 때에는 

import phoneImg from "../img/telephone-icon.png"

export const infoList = [
    {
        img:phoneImg,
        info:"이름",
        detail:"메롱이닷"
    },
    {
        img:phoneImg,
        info:"생년월일",
        detail:"1933.00.00"
    },

이렇게 직접 url을 넣어주지않고 import를 통해 Img를 받아와 넣어주면 해결된다.