이미지 옵션 목록에서 어떻게 선택하나요?

Question

선택 입력이 선택할 이미지 목록을 표시하는 디자인을 구현하려고 합니다.

<이름 선택="choose-image">
    <option value="" 비활성화됨 선택됨>이미지 선택</option>
    <option value="Smiling"><img src={image} alt="local-avatar" /></option>
    <option value="슬픈">슬픈</option>
</select>

두 번째 옵션은 아무것도 표시하지 않으며, 표시된다고 하더라도 드롭다운 스타일을 지정해야 하는데 어떻게 해야 할지 아직 잘 모르겠습니다. 도움을 주셔서 감사합니다. 감사해요.

Answer 1

HTML에서는 요소의 태그에 이미지를 직접 사용하는 것이 지원되지 않습니다. 두 번째 옵션이 아무것도 표시하지 않는 이유는

태그가 HTML 요소가 아닌 일반 텍스트로 사용되기 때문입니다. 선택할 이미지 목록을 표시하려는 디자인을 구현하려면 HTML, CSS 및 JavaScript를 사용하는 사용자 정의 선택 드롭다운 메뉴를 사용할 수 있습니다. Select2, Chosen 또는 CSS 및 JavaScript를 사용한 사용자 정의 구현과 같이 이를 달성하는 데 도움이 되는 여러 라이브러리와 플러그인을 사용할 수 있습니다. 다음은 이미지가 포함된 사용자 정의 선택 드롭다운 메뉴를 만드는 방법에 대한 예입니다.

HTML

으아아아

CSS:

으아아아

자바스크립트:

으아아아

이 예에서는 {image_url}을 표시하려는 이미지의 실제 URL로 바꿀 수 있습니다. 사용자가 사용자 정의 선택을 클릭하면 이미지 목록이 표시되고 사용자가 이미지를 선택하면 그에 따라 선택한 옵션이 업데이트됩니다. 이는 기본적인 예이며 특정 요구 사항과 스타일 선호도에 따라 CSS와 JavaScript를 조정해야 할 수도 있다는 점을 명심하세요. 또한 더 복잡한 애플리케이션의 경우 React 또는 Vue.js와 같은 프런트엔드 프레임워크 사용을 고려해보세요.