bootstrap의 card를 사용했는데 이미지 업로드 버튼이 동... - 인프런

<div class="col-sm-6">
                        <div class="card text-center">
                            <div class="card-header">
                                프로필 이미지
                            </div>
                            <div id="current-profile-image" class="mt-3">
                                <svg th:if="${#strings.isEmpty(profile.profileImage)}" class="rounded"
                                     th:data-jdenticon-value="${account.nickname}" width="125" height="125"></svg>
                                <img th:if="${!#strings.isEmpty(profile.profileImage)}" class="rounded"
                                     th:src="${profile.profileImage}"
                                     width="125" height="125" alt="name" th:alt="${account.nickname}"/>
                            </div>
                            <div id="new-profile-image" class="mt-3"></div>
                            <div class="card-body">
                                <div class="custom-file">
                                    <input type="file" class="custom-file-input" id="profile-image-file">
                                    <label class="custom-file-label" for="profile-image-file">프로필 이미지 변경</label>
                                </div>
                                <div id="new-profile-image-control" class="mt-3">
                                    <button class="btn btn-outline-primary btn-block" id="cut-button">자르기</button>
                                    <button class="btn btn-outline-success btn-block" id="confirm-button">확인</button>
                                    <button class="btn btn-outline-warning btn-block" id="reset-button">취소</button>
                                </div>
                                <div id="cropped-new-profile-image" class="mt-3"></div>
                            </div>
                        </div>
                    </div>

안녕하세요, 인프런 AI 인턴입니다.

나도 하고 싶어 개발자님, 질문해주신 내용은 부트스트랩의 카드를 사용했을 때 이미지 업로드 버튼이 동작하지 않는 문제와 관련된 것으로 보입니다. 여기 제공된 정보를 바탕으로 하지 않고 일반적인 해결 방법을 제안드리겠습니다.

이미지 업로드 버튼이 동작하지 않는 경우, 일반적으로 다음과 같은 원인 및 해결 방법을 확인해볼 수 있습니다:

JavaScript 또는 jQuery 라이브러리 충돌: 페이지에 다른 JavaScript 라이브러리 또는 스크립트가 존재할 경우, 이벤트 핸들러 작동에 영향을 줄 수 있습니다. 페이지에 포함된 모든 스크립트와 라이브러리의 호환성을 확인하세요.
이벤트 리스너 부재: input 타입의 파일 선택 버튼에 대한 이벤트 리스너가 제대로 설정되지 않았을 수 있습니다. 예를 들어, jQuery를 사용하여 파일 선택 이벤트를 감지하는 코드를 추가해야 합니다.

$(document).ready(function() {
    $('#profile-image-file').on('change', function() {
        // 여기에 파일 선택시 실행할 동작을 추가
    });
});

CSS 스타일링 문제: 때로는 CSS 스타일 때문에 실제 입력 필드가 사용자에게 보이지 않거나 클릭할 수 없는 상황이 발생할 수 있습니다. 개발자 도구를 사용하여 입력 필드의 위치와 가시성을 확인하세요.
브라우저 호환성 문제: 특정 브라우저에서만 문제가 발생할 수도 있습니다. 따라서 다른 브라우저에서도 동일한 문제가 발생하는지 확인하세요.
서버 사이드 코드 문제: 사용자가 이미지를 업로드하려고 할 때 서버 측 코드에서 처리가 제대로 이루어지지 않는 경우 동작하지 않을 수 있습니다. 서버 로그를 확인하여 요청이 올바르게 처리되고 있는지 검토하세요.

위의 해결 방법들을 시도해보시고, 여전히 문제가 해결되지 않는다면 보다 구체적인 에러 메시지나 콘솔 로그 등의 추가 정보를 제공해주시면 더 도움을 드릴 수 있을 것 같습니다.

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

bootstrap의 card를 사용했는데 이미지 업로드 버튼이 동작하지 않습니다