23.05.11) 미니프로젝트-셀렉트 옵션에 이미지 넣어보기

작품리뷰를 해야하기 때문에 셀렉트옵션에서 작품제목을 선택하면

작품 포스터이미지도 나올 수 있게 하고 싶었다.

작품 선택후 리뷰 적고, 별점까지 선택한 후 작성하면 최종적으로

포스팅 되는 카드를 만드는게 목표다

 

<select> 요소 내에 직접 이미지를 삽입하는것은 불가능하기 때문에

이미지를 <option>요소의 data-image 속성에 저장하고,

선택된 <option>요소에 해당 이미지를 출력할 수 있도록 할 것이다.

이렇게 하면 이미지를 따로 다운받지 않고도 url로 긁어와서 나타날 수있게된다.

 

기존 짜놓은 코드에서

       <select

          class="form-select form-select-sm" aria-label=".form-select-sm example">

          <option selected>작품 제목</option>

          <option value="1">타짜</option>

          <option value="2">도둑들</option>

          <option value="3">관상</option>

          <option value="4">굿바이 싱글</option>

          <option value="5">시그널</option>

          <option value="6">직장의 신</option>

        </select>

아이디를  id="movie-select" 새로 하나 설정해주고

data-image에 해당하는 작품 이미지 주소를 붙여준다

<hmtl>

<div class="movie">
 <select class="form-select form-select-sm" id="movie-select" aria-label=".form-select-sm example">
  <option selected>작품 제목</option>
  <option value="1" data-image="https://cdn.topstarnews.net/news/photo/201912/713842_425754_1632.jpg">타짜</option>
  <option value="2" data-image="https://t1.daumcdn.net/cfile/192F9A4850062F8230">도둑들</option>
  <option value="3" data-image="http://t1.daumcdn.net/cfile/276B3548521306AA13">관상</option>
  <option value="4" data-image="http://t1.daumcdn.net/movie/8f8aa2452569c57fd840b510809ce6fb7721c3ed">굿바이 싱글</option>
  <option value="5" data-image="https://web-cf-image.cjenm.com/crop/660x950/public/share/metamng/programs/signal-drama-poster-ko-001-10.jpg?v=1682435113">시그널</option>
  <option value="6" data-image="https://i.namu.wiki/i/DX7ILzkmnirJYiGOM4sui5SXxGLnjyCojbziHmXQ0X0G0OpZkh2icC5xGqfqD9DHjnRpEWfMHE3tWPMarbGEgQ.webp">직장의 신</option>
 </select>
 <img id="movie-image" src="" alt="selected movie image" width="200" height="200">

이미지 사이즈는 나중에 댓글포스팅 코드 완료 후 수정할 계획이라 

대략 width="200" height="200" 사이즈로 맞춰놓았다.

<div class="mybtn">
 <button type="button" class="btn btn-secondary" onclick="showSelectedOptionImage()">작성</button>
</div>

버튼을 누르면 선택된 옵션에 맞는 이미지가 출력될 수 있도록

showSelectedOptionImage() 함수를 추가했다.

이 함수는 선택된 <option> 요소에 맞는 이미지 url을 가져와서

<img>요소의 src속성에 설정된다.

 

<js>

// 선택된 옵션에 대응하는 이미지를 출력하는 함수를 정의합니다.
function showSelectedOptionImage() {
 // select 요소와 img 요소를 가져옵니다.
 const selectElement = document.getElementById("movie-select");
 const imageElement = document.getElementById("movie-image");
    
 // 선택된 option 요소에 대응하는 이미지 URL을 가져옵니다.
 const selectedOption = selectElement.options[selectElement.selectedIndex];
 const imageUrl = selectedOption.dataset.image;
    
 // img 요소의 src 속성에 선택된 이미지 URL을 설정합니다.
 imageElement.setAttribute("src", imageUrl);
        }

아직은 완전 허접하지만 댓글기능과 합쳐서 사진과 합쳐진 리뷰카드를 완성해볼것이다......