질문드립니다.

6 글 보임 - 1 에서 6 까지 (총 6 중에서)

글쓴이

글

2022년 9월 12일 06:09 #46147

참가자

firebase 강의를 따라하던 도중에 backgroungimage 가 출력이 안됩니다. 그냥 상태 뿐만아니라 backgroundimage에 이미지url값을 넣었을 때도 image가 않나옵니다.

2022년 9월 12일 09:49 #46150

codingapple

키 마스터

코드를 어떻게 짰습니까

2022년 9월 12일 16:16 #46180

양정운

참가자

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <link href="main.css" rel="styleheet">

</head>
<body>
  
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
      자린고비
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
          <li class="nav-item">
            Home
          
          <li class="nav-item">
            Link
          
          <li class="nav-item dropdown">
            
              Dropdown
            
            <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
              Action
              Another action
              <hr class="dropdown-divider">
              Something else here
            
          
          <li class="nav-item">
            Disabled
          
        
        <form class="d-flex">
          <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
          <button class="btn btn-outline-success" type="submit">Search</button>
        </form>
      </div>
    </div>
  </nav>

  <div class="container mt-3">
  
  </div>

  
  <script src="https://www.gstatic.com/firebasejs/8.6.5/firebase-app.js"></script>
  <script src="https://www.gstatic.com/firebasejs/8.6.5/firebase-auth.js"></script>
  <script src="https://www.gstatic.com/firebasejs/8.6.5/firebase-firestore.js"></script>
  <script src="https://www.gstatic.com/firebasejs/8.6.5/firebase-storage.js"></script>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

  <script
  src="https://code.jquery.com/jquery-3.6.1.min.js"
  integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ="
  crossorigin="anonymous"></script>

  <script>
   const firebaseConfig = {
  apiKey: "AIzaSyDi9P8XQS8b1VRjpwZOCg9OUsuCie4ZW3I",
  authDomain: "jalingobi-9419c.firebaseapp.com",
  projectId: "jalingobi-9419c",
  storageBucket: "jalingobi-9419c.appspot.com",
  messagingSenderId: "571559516102",
  appId: "1:571559516102:web:b4b59807e37e976c0e04c7"
};

// Initialize Firebase  
  firebase.initializeApp(firebaseConfig);
  </script>
<button type="submit" class="btn btn-primary" id="logout">등록</button>
<button type="submit" class="btn btn-primary" id="logout">로그인</button>
  <script>

   const db = firebase.firestore();
   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">${doc.data().날짜}</p>
      <p class="price">${doc.data().가격}</p>
      <p class="float-end">🤍0</p>
     </div>
    </div> `;
      $('.container').append(템플릿)
     })
   })

  </script>
  
  
</body>
</html>

2022년 9월 12일 16:16 #46181

양정운

참가자

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <link href="main.css" rel="styleheet">

</head>
<body>
  
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
      자린고비
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
          <li class="nav-item">
            Home
          
          <li class="nav-item">
            Link
          
          <li class="nav-item dropdown">
            
              Dropdown
            
            <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
              Action
              Another action
              <hr class="dropdown-divider">
              Something else here
            
          
          <li class="nav-item">
            Disabled
          
        
        <form class="d-flex">
          <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
          <button class="btn btn-outline-success" type="submit">Search</button>
        </form>
      </div>
    </div>
  </nav>

  <div class="container mt-3">
    <input type="text" class="form-control mt-2" id="title" placeholder="title">
    <textarea class="form-control mt-2" id="content">content</textarea>
    <input type="text" class="form-control mt-2" id="price" placeholder="price">
    <input class="form-control mt-2" type="file" id="image">
    <button class="btn btn-danger mt-3" id="send">올리기</button>
  </div>

  
  <script src="https://www.gstatic.com/firebasejs/8.6.5/firebase-app.js"></script>
  <script src="https://www.gstatic.com/firebasejs/8.6.5/firebase-auth.js"></script>
  <script src="https://www.gstatic.com/firebasejs/8.6.5/firebase-firestore.js"></script>
  <script src="https://www.gstatic.com/firebasejs/8.6.5/firebase-storage.js"></script>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

  <script
  src="https://code.jquery.com/jquery-3.6.1.min.js"
  integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ="
  crossorigin="anonymous"></script>

  <script>
   const firebaseConfig = {
  apiKey: "AIzaSyDi9P8XQS8b1VRjpwZOCg9OUsuCie4ZW3I",
  authDomain: "jalingobi-9419c.firebaseapp.com",
  projectId: "jalingobi-9419c",
  storageBucket: "jalingobi-9419c.appspot.com",
  messagingSenderId: "571559516102",
  appId: "1:571559516102:web:b4b59807e37e976c0e04c7"
};

// Initialize Firebase  
firebase.initializeApp(firebaseConfig);
  </script>

  <script>

   const db = firebase.firestore();
   const stotage = firebase.storage();

   $('#send').click(function(){

    var file = document.querySelector('#image').files[0];
    var storageRef = stotage.ref();
    var 저장할경로 = storageRef.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(), 
        가격 : $('#price').val(),
        내용 : $('#content').val(),
        날짜 : new Date(),
        이미지 : url
    }
   db.collection('product').add(저장할거).then((result)=>{
    console.log(result);
   window.location.href ='file:///C:/Users/pizza/Desktop/market%20web/public/index.html#'
   }).catch((err)=>{
    console.log(err)
        })
      });
    }
  );
})

  </script>
  
  
</body>
</html>

2022년 9월 12일 16:16 #46183

양정운

참가자

이런식으로 짰습니다.

2022년 9월 12일 20:11 #46221

codingapple

키 마스터

doc.data().이미지 를 콘솔창에 출력부터 해봅시다 
일부 게시물만 안나오면 해당게시물은 이미지업로드가 안되었을 뿐입니다

글쓴이

글

6 글 보임 - 1 에서 6 까지 (총 6 중에서)

답변은 로그인 후 가능합니다.

로그인

https://codingapple.com/wp-content/uploads/2019/06/logo2-3.png