반응형 onerror2 img태그 onError 처리하기 (대체 이미지) Next.js같은 경우는 Image태그를 사용하라고 권장하지만 react와 next.js에서 img태그를 사용할 시에 대체 이미지 처리하는 방법을 기록해둔다. 상단의 이미지와같이 존재하지 않는경우 대체이미지를 띄우게 할 수 있는데 단순 삼항연산자 조건문으로 설정해도 되겠지만 그래도 혹시나 파일이 없을 때 대체 이미지를 띄우는 방식을 알아두자, 특히 외부 링크로 사진을 가져올 때 필요할것 같다. 이와같이 사용한다고 치면 src = 이미지링크 alt = 이미지가 없을시 나타내줄 설명 그리고 onError 부분이 본 링크 이미지가 없을때 대체 해서 실행해주는 부분이다. react와 next.js에서는 따로 함수를 만들어 사용해준다. const default_img = "ramen/default.png"; co.. 2022. 4. 2. Next.js, React.js export해서 변수 데이터 사용하기 약 400~500개의 라면 데이터가 있는데, 100개정도의 데이터는 사진파일이 존재하지 않았다. 그래서 사진파일이 없는경우, onError로 처리해주다가 500에러 문제로 좀더 근본적으로 처리하려고 했는데 현직 개발자 분에게 상담했더니 이런경우는 백엔드에서 데이터가 없는파일은 없다고 처리를 해주는게 맞다고 하신다. 근데 지금 프로젝트 진행과정상, 다시 데이터 정리하기도 시간이 얼마없고 백엔드 담당하는 친구가 거의 한명인 상황 급하게 사진파일이 없는 녀석을 처리해줄 필요가 있었다. 500에러를 신경쓰지 않으면 그냥 진행하면 되지만, 그 에러가 보기싫어 사진파일이 없는 데이터를 배열로 만들어주어 처리했다. 그 때 사용한 export문법 data.js let doc = [ "7가지 채소가득 우리밀라면.png".. 2022. 4. 2. 이전 1 다음 반응형
