당근거래 사진오류

#####################################
index.html

<script>
    const db = firebase.firestore(); //db값 가져오기
    db.collection('product').get().then((결과)=>{
      결과.forEach((doc)=>{
        console.log(doc.data());
        var 템플릿 = ` <div class="product">
      <div class="thumbnail" style="background-image: url('${doc.data().이미지}');"></div>
      <div class="flex-grow-1 p-4">
        <h5 class="title">${doc.data().제목}</h5>
        <p class="date">2030년 1월 8일</p>
        <p class="price">${doc.data().가격}</p>
        <p class="float-end">*</p>
      </div>
    </div>`;
        $('.container').append(템플릿)
      })
    })
 

  </script>

##############################

upload.html 
$('#send').click(function() {
        var file = document.querySelector('#image').files[0];
        var firebaseRef = storage.ref();
        var 저장할경로 = firebaseRef.child('image/' + file.name);
        var 업로드작업 = 저장할경로.put(file);
        
        업로드작업.on('state_changed', 
            null, // 업로드 중인 과정을 보여줄 수 있음 (현재는 비활성화)
            (error) => { // 에러시 동작하는 함수
                console.error('실패사유는', error);
            }, 
            () => { // 성공시 동작하는 함수
                업로드작업.snapshot.ref.getDownloadURL().then((url) => {
                    console.log('업로드된 경로는', url);

                    var 저장할거 = { 
                        제목: $('#title').val(),
                        가격: parseInt($('#price').val(), 10), // 문자열을 숫자로 변환
                        내용: $('#content').val(),
                        날짜: new Date(),
                        이미지: url
                    };

                    db.collection('product').add(저장할거).then((result) => { // 인터넷 오류같은 상황으로 에러 발생시 DB에 저장 성공/실패 시 코드 실행하려면
                        console.log(result);
                        window.location.href = "/index.html";
                    }).catch((err) => {
                        console.log(err);
                    });
                });
            }
        );
    });
</script>

storage에는 정상적으로 업로드 됐습니다ㅠㅠㅠ