23-05-11 TIL 일지 : 프론트엔드에서 백엔드 이미지 불러오기

Today I Learned

---

어떤 문제가 있었는지

익숙하지 않은 JS... 생각해보면 쉬운것들조차 한참을 해맸다

이미지를 불러오는데 기존의 장고템플릿을 사용했을때는 static이나 media 경로 설정이 문제였지만

DRF로 백엔드와 프론트엔드가 나눠진 이후로는 백엔드의 이미지경로 설정을 어떻게 해야하나가 문제였다.

 

---

내가 시도해 본 것들

// 게시글 목록 보여주기
export async function viewProductList() {
  const products = await getProduct();
  products.forEach((product) => {
    const template = document.createElement("div");
    template.setAttribute("class", "col-4 col-12-medium");

    template.innerHTML = `<div class="col-4 col-12-medium" data-product-id="${product.id}">
                                <section class="box feature">
                                    <a onclick="productDetail(${product.id})" class="image featured">
                                    <img src="${product.image}" alt="" /></a>
                                    <div class="inner">
                                        <header>
                                            <h2>${product.name}</h2>
                                            <h5>${product.brand}</h5>
                                            <h6>likes:${product.likes_count}</h6>
                                        </header>
                                    </div>
                                </section>
                            </div>`;
    const posting_list = document.getElementById("jy-product");
    posting_list.appendChild(template);

  });
}

 

그냥 바로 product.image 를 불러오면 적용이 되지 않는다.

img src 를 확인해보니 절대값 주소로 생각해서 불러오는것을 확인, 주소지정을 더 정확히 해줘야한다.

 

---

어떻게 해결 했는지

// 게시글 목록 보여주기
export async function viewProductList() {
  const products = await getProduct();
  products.forEach((product) => {
    const template = document.createElement("div");
    template.setAttribute("class", "col-4 col-12-medium");
    // 이미지 필드가 존재하는 경우에만 경로를 동적으로 변경
    let imagePath = "images/pic01.jpg"; // 기본 이미지 경로
    if (product.image) {
      imagePath = BACK_BASE_URL + "/" + product.image; // 이미지 경로를 적절히 수정해야 합니다.
    }
    template.innerHTML = `<div class="col-4 col-12-medium" data-product-id="${product.id}">
                                <section class="box feature">
                                    <a onclick="productDetail(${product.id})" class="image featured">
                                    <img src="${imagePath}" alt="" /></a>
                                    <div class="inner">
                                        <header>
                                            <h2>${product.name}</h2>
                                            <h5>${product.brand}</h5>
                                            <h6>likes:${product.likes_count}</h6>
                                        </header>
                                    </div>
                                </section>
                            </div>`;
    const posting_list = document.getElementById("jy-product");
    posting_list.appendChild(template);

  });
}

 

이런식으로 product.image 를 백엔드 주소인 http://127.0.0.1/{product.image주소} 로 정의해주면

정상적으로 불러오는 것을 확인,

 

그래서 imagePath 를 정의하고 이미지 값이 없으면 기본이미지 경로를 정의해줬다 

 

---

무엇을 새롭게 배웠는지

프론트엔드에서 백엔드의 파일 불러오기