6 글 보임 - 1 에서 6 까지 (총 6 중에서)
-
글쓴이글
-
2022년 9월 12일 06:09 #46147
양정운참가자firebase 강의를 따라하던 도중에 backgroungimage 가 출력이 안됩니다. 그냥 상태 뿐만아니라 backgroundimage에 이미지url값을 넣었을 때도 image가 않나옵니다.
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일 20:11 #46221
codingapple키 마스터doc.data().이미지 를 콘솔창에 출력부터 해봅시다 일부 게시물만 안나오면 해당게시물은 이미지업로드가 안되었을 뿐입니다
-
글쓴이글
6 글 보임 - 1 에서 6 까지 (총 6 중에서)
- 답변은 로그인 후 가능합니다.