인프런 커뮤니티 질문&답변

위펀님의 프로필 이미지
위펀

작성한 질문수

프론트엔드 개발자를 위한, 실전 웹 성능 최적화(feat. React) - Part. 2

3-4) 이미지 사이즈 최적화

img 태그가 작동이 되지 않습니다.

해결된 질문

작성

·

337

1

3-4 브랜치로 체크아웃을 하여 테스트해봐도 source의 srcset 속성에 {props.webp + 's'}를 줬을 때 이미지가 엑박이 뜹니다.

 

previousSibling.srcset = previousSibling.dataset.srcset;

위 소스 한 줄을 지울 때는 정상동작 되는데 이유가 있을까요?

 

답변 1

0

유동균님의 프로필 이미지
유동균
지식공유자

안녕하세요, 위펀님,

답변이 늦어서 죄송합니다.

이미지 에러에 대해서 질문을 주셨는데요,

우선 {props.webp + 's'}코드를 넣었을 때 webp 이미지에서 에러가 나는 것은 당연합니다.
다만, 기본 img 태그에 원본 이미지가 있어서 엑박이 아닌 해당 이미지로 나와야 됩니다.

엑박이 뜨고 있다는 것은 이미지 소스에 문제가 있다는 것 같은데요.
정확한 원인을 알려면 콘솔에 해당 이미지 주소를 직접 찍어보고 해당 경로에 이미지가 제대로 있는지 확인해봐야 할 것 같습니다.
(에러도 확인해보고요)

확인해보시고 자세한 내용을 공유해주시면 답변 하는데 도움이 될 것 같습니다.

감사합니다. :)

위펀님의 프로필 이미지
위펀

작성한 질문수

질문하기