Search⌘ K
AI Features
Home
Courses
Full-Stack Web Applications with Firebase

Showing Images in the Browser

Explore how to display images in the browser by linking Firebase Storage uploads with Cloud Firestore. Understand how to set up real-time database listeners and dynamically create image elements in a styled grid. This lesson teaches you to build a responsive image-sharing web app that updates instantly as new photos are added.

We'll cover the following...

Add Cloud Firestore #

We need a way to keep track of files we want to show the user so we will use the Cloud Firestore database for this. Add the CDN script to the head of your HTML file.

HTML
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Image Sharing Application</title>
	<link rel="stylesheet" href="styles.css">
	<script src="https://www.gstatic.com/firebasejs/6.3.0/firebase-app.js"></script>
	<script src="https://www.gstatic.com/firebasejs/6.3.0/firebase-storage.js"></script>
	<script src="https://www.gstatic.com/firebasejs/6.3.0/firebase-firestore.js"></script>
</head>

Where the images get placed

...