해당 페이지에서 2,3,4 슬라이드의 하단부분 디테일 이미지 부분의 이미지값이 없어 alt 값인 상세정보랑, 빈 이미지 아이콘이 뜨는 상황

저 값을 if문을 줘서 조절시키면 어떨까 싶어 코드를 수정

for (let i = 0; i < liveApiData.length; i++) {
    let tag = "";
    if (liveApiData[i].live) {
      const isReplay = liveApiData[i].방송 === "라이브 다시보기";
      tag = `
      <div class="swiper-slide">
        <a href="#" class="live_slide_item">  
          <div class="live_image${isReplay ? " replay" : ""}">
            <img
              src="${liveApiData[i].이미지}"
              alt="${liveApiData[i].alt}"
            />      
          </div>
          <div class="live_info">
            <div class="live_state">
              <span class="live_wait">${liveApiData[i].방송}</span>
            </div>
            <p class="live_item_title">
              ${liveApiData[i].타이틀}
            </p>
            <div class="live_day">
              <div class="live_day_date">${liveApiData[i].날짜}</div>
              <div class="live_day_time">${liveApiData[i].시간}</div>
            </div>
            
          <div class="live_detail">
            <div class="live_detail_image">
              <img
                src="${liveApiData[i].디테일이미지}"
                alt="${liveApiData[i].디테일alt}"
              />
            </div>
            <p class="live_detail_title">
              ${liveApiData[i].디테일타이틀}
            </p>
          </div>
          
    

          </div>
        </a>
      </div>
  `;

원본코드는 이거인데 if문을 추가하고

for (let i = 0; i < liveApiData.length; i++) {
    let tag = "";
    if (liveApiData[i].live) {
      const isReplay = liveApiData[i].방송 === "라이브 다시보기";
      tag = `
      <div class="swiper-slide">
        <a href="#" class="live_slide_item">  
          <div class="live_image${isReplay ? " replay" : ""}">
            <img
              src="${liveApiData[i].이미지}"
              alt="${liveApiData[i].alt}"
            />      
          </div>
          <div class="live_info">
            <div class="live_state">
              <span class="live_wait">${liveApiData[i].방송}</span>
            </div>
            <p class="live_item_title">
              ${liveApiData[i].타이틀}
            </p>
            <div class="live_day">
              <div class="live_day_date">${liveApiData[i].날짜}</div>
              <div class="live_day_time">${liveApiData[i].시간}</div>
            </div>
            `;

      if () {
        tag += `
          <div class="live_detail">
            <div class="live_detail_image">
              <img
                src="${liveApiData[i].디테일이미지}"
                alt="${liveApiData[i].디테일alt}"
              />
            </div>
            <p class="live_detail_title">
              ${liveApiData[i].디테일타이틀}
            </p>
          </div>
          `;
      }
      tag += `

          </div>
        </a>
      </div>

if문의 조건을 뭘로걸지.. 고민하다 디테일 이미지를 배열로 나타내고, 배열의 길이가 0보다 크면 출력시키도록 조건을 걸어봤다.

const liveApiData = [
    {
      id: 1,
      링크: "#",
      이미지:
        "	<https://common-live-vod.interparkcdn.net/data/image/20250612/14/151/20250612011101.jpg>",
      alt: "라이브",
      방송: "방송임박", // "라이브" , "라이브 다시보기",
      타이틀:
        "[푸꾸옥 자유여행] 5성급 노보텔 vs 4성급 빈홀리데이 피에스타! 30만원대~ 🏝 프라이빗 렌터카+객실당 망고 1kg",
      날짜: "",
      시간: "",
      디테일이미지: [
        "<https://common-live-vod.interparkcdn.net/data/image/20250612/14/151/20250612014205.jpg>",
      ],
      디테일alt: "상세정보",
      디테일타이틀: "[기획전] 푸꾸옥 자유여행 혜택 보기",
      live: true,
    },
    {
      id: 2,
      링크: "#",
      이미지:
        "<https://common-live-vod.interparkcdn.net/data/image/20250610/14/153/20250610023358.jpeg>",
      alt: "라이브",
      방송: "방송예정",
      타이틀: "[휘닉스 브랜드 호텔&리조트] 여름맞이 평창&제주 특가",
      날짜: "06월 17일 (화)",
      시간: "19:00",
      디테일이미지: [],
      디테일alt: "",
      디테일타이틀: "",

      live: true,
    },]

데이터의 값에 디테일 이미지 부분을 배열로 고쳤고

html = "";
  for (let i = 0; i < liveApiData.length; i++) {
    let tag = "";
    if (liveApiData[i].live) {
      const isReplay = liveApiData[i].방송 === "라이브 다시보기";
      tag = `
      <div class="swiper-slide">
        <a href="#" class="live_slide_item">  
          <div class="live_image${isReplay ? " replay" : ""}">
            <img
              src="${liveApiData[i].이미지}"
              alt="${liveApiData[i].alt}"
            />      
          </div>
          <div class="live_info">
            <div class="live_state">
              <span class="live_wait">${liveApiData[i].방송}</span>
            </div>
            <p class="live_item_title">
              ${liveApiData[i].타이틀}
            </p>
            <div class="live_day">
              <div class="live_day_date">${liveApiData[i].날짜}</div>
              <div class="live_day_time">${liveApiData[i].시간}</div>
            </div>
            `;

      if (liveApiData[i].디테일이미지.length > 0) {
        tag += `
          <div class="live_detail">
            <div class="live_detail_image">
              <img
                src="${liveApiData[i].디테일이미지[0]}"
                alt="${liveApiData[i].디테일alt}"
              />
            </div>
            <p class="live_detail_title">
              ${liveApiData[i].디테일타이틀}
            </p>
          </div>
          `;
      }
      tag += `

          </div>
        </a>
      </div>
  `;
    } else {
      tag += `
        
      <div class="swiper-slide">
        <a href="#" class="live_slide_item">
          <div class="unlive_image">
            <img src="images/live_99.jpg" alt="방송대기" />
          </div>
          <div class="unlive_info">
            <div class="unlive_info_logo"><img src="images/live_logo.svg" alt=""></div>
            <div class="unlive_info_title">방송준비중입니다.</div>
            <div class="unlive_info_button">편성표 바로가기</div>
          </div>
        </a>
      </div>
      `;
    }

    html = html + tag;
  }

if문 안의 조건을 liveApiData[i].디테일이미지.length > 0 로 두어 값이 있으면 1이상임으로 출력되도록 코드를 변경

결과

디테일 이미지가 없다면 출력되지 않도록 내가 원하는데로 수정완료했다.