IMAGE2 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. background-size https://developer.mozilla.org/ko/docs/Web/CSS/background-size background-size - CSS: Cascading Style Sheets | MDN 배경 이미지로 덮이지 않은 공간은 background-color 속성으로 채워지고, 배경 이미지에서 투명하거나 반투명한 부분을 통해서도 배경색이 보입니다. developer.mozilla.org 프로젝트 메인페이지 제작하다가 알게된속성, 튜토리얼이나 설명은 MDN문서에 잘 나와있다. 이와같이 특정 div 같은곳에 꽉차게 나타낼것인지 이렇게 한번나오게하고, 좌우 혹은 가운데 배열할지 mui react에 적용하다가 배경 적용하다가 알게되었다. 아래와 같이 배치하고싶어서!! 물론 좌우, 가득차게도 가능하다. 2022. 2. 4. 이전 1 다음
