从firebase存储中检索图像并在应用程序中查看图像

<!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/9.6.1/firebase-app.js"></script>

<!-- Add Firebase products that you want to use -->
<script src="https://www.gstatic.com/firebasejs/9.6.1/firebase-storage.js"></script>

const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID"
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);

const storage = firebase.storage();
const storageRef = storage.ref();
const fileInput = document.getElementById('fileInput');

fileInput.addEventListener('change', (event) => {
  const file = event.target.files[0];
  const fileRef = storageRef.child(`images/${file.name}`);

  fileRef.put(file).then((snapshot) => {
    console.log('Uploaded a file!');
  });
});

const imageUrl = 'YOUR_IMAGE_URL'; // 从 Firebase Storage 获取的图像 URL

const imgElement = document.createElement('img');
imgElement.src = imageUrl;
document.body.appendChild(imgElement);

service firebase.storage {
  match /b/{bucket}/o {
    match /images/{allPaths=**} {
      allow read, write: if request.auth != null;
    }
  }
}