I have followed all the steps that required to initialize firebase and display image from firebase storage in html. However, the image do not display. This is part of my code. I hope the experts here can help me in solving this problem.
This is part of my code
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=yes">
<meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
<link rel="stylesheet" href="components/loader.css">
<script src="components/loader.js"></script>
<ons-toolbar>
<!-- <div class="center">Page2</div> -->
BACK
</ons-toolbar>
</head>
<body>
<script src="https://www.gstatic.com/firebasejs/4.5.0/firebase.js"> </script>
<script>
// Initialize Firebase
var config = {
apiKey: "AIzaSyBIGAWQPXoU0446Ghupx8wxS9buveKY2jA",
authDomain: "displaysop.firebaseapp.com",
databaseURL: "https://displaysop.firebaseio.com",
projectId: "displaysop",
storageBucket: "displaysop.appspot.com",
messagingSenderId: "82849386400"
};
firebase.initializeApp(config);
var storageRef = firebase.storage.ref('images/PRSB Map.jpg');
storageRef.put('images/PRSB Map.jpg').getDownloadURL().then(function(url){
var test = document.querySelector('images').src;
}).catch(function(error){
});
</script>
<img src="test" height="125" width="125"/>
</body>
</html>
I'm no JavaScript expert, but it looks like you'll need to:
Get the correct DOM object
Set it's src property to the downloaded URL
The code might look something like this:
<script>
...
storageRef.put('images/PRSB Map.jpg').getDownloadURL().then(function(url) {
var test = document.querySelector('#test');
test.src = url;
});
</script>
...
<img id="test" height="125" width="125"/>
Related
I need to publish my Flutter web app on a web server folder.
Here you have the index.html file:
<!DOCTYPE html>
<html>
<head>
<!--
If you are serving your web app in a path other than the root, change the
href value below to reflect the base path you are serving from.
The path provided below has to start and end with a slash "/" in order for
it to work correctly.
For more details:
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
This is a placeholder for base href that will be replaced by the value of
the `--base-href` argument provided to `flutter build`.
-->
<base href="/freelife/">
<meta charset="UTF-8">
<meta content="IE=Edge" http-equiv="X-UA-Compatible">
<meta name="description" content="A new Flutter project.">
<!-- iOS meta tags & icons -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="capenergy_ns">
<link rel="apple-touch-icon" href="icons/Icon-192.png">
<!-- Favicon -->
<link rel="icon" type="image/png" href="favicon.png"/>
<title>Freelife</title>
<link rel="manifest" href="manifest.json">
<script>
// The value below is injected by flutter build, do not touch.
var serviceWorkerVersion = null;
</script>
<!-- This script adds the flutter initialization JS code -->
<script src="flutter.js" defer></script>
</head>
<body>
<script>
window.addEventListener('load', function(ev) {
// Download main.dart.js
_flutter.loader.loadEntrypoint({
serviceWorker: {
serviceWorkerVersion: serviceWorkerVersion,
}
}).then(function(engineInitializer) {
return engineInitializer.initializeEngine();
}).then(function(appRunner) {
return appRunner.runApp();
});
});
</script>
<script src="https://www.gstatic.com/firebasejs/8.4.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.4.1/firebase-messaging.js"></script>
<script>
const firebaseConfig = {
apiKey: "AIz...",
authDomain: "fre...",
projectId: "fre...",
storageBucket: "free...",
messagingSenderId: "53...",
appId: "1:538....",
measurementId: "G-X..."
};
firebase.initializeApp(firebaseConfig);
</script>
<script src="main.dart.js" type="application/javascript"></script>
<script>
if ("serviceWorker" in navigator) {
window.addEventListener("load", function () {
navigator.serviceWorker.register("firebase-messaging-sw.js");
});
}
</script>
</body>
</html>
Here you have firebase-messaging-sw.js:
importScripts("https://www.gstatic.com/firebasejs/9.12.1/firebase-app.js");
importScripts("https://www.gstatic.com/firebasejs/9.12.1/firebase-messaging.js");
firebase.initializeApp({
apiKey: "AIz...",
authDomain: "free...",
projectId: "free...",
storageBucket: "free...",
messagingSenderId: "53...",
appId: "1:53...",
measurementId: "G-X..."
});
const messaging = firebase.messaging();
messaging.setBackgroundMessageHandler(function (payload) {
const promiseChain = clients
.matchAll({
type: "window",
includeUncontrolled: true
})
.then(windowClients => {
for (let i = 0; i < windowClients.length; i++) {
const windowClient = windowClients[i];
windowClient.postMessage(payload);
}
})
.then(() => {
return registration.showNotification("New Message");
});
return promiseChain;
});
self.addEventListener('notificationclick', function (event) {
console.log('notification received: ', event)
});
The issue is that publishing the created web folder inside build folder in the app, launching the web in the browser shows a blank page.
Lookin the output of the web console debugger, it throws a lot of errors:
The web app was working fine until I inserted all Firebase dependencies.
try deleting [base href="/freelife/"] from the index.html file
It should stay like this.
<!DOCTYPE html>
<html>
<head>
<!--
If you are serving your web app in a path other than the root, change the
href value below to reflect the base path you are serving from.
The path provided below has to start and end with a slash "/" in order for
it to work correctly.
For more details:
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
This is a placeholder for base href that will be replaced by the value of
the `--base-href` argument provided to `flutter build`.
-->
<!--<base href="/freelife/"> -->
<meta charset="UTF-8">
<meta content="IE=Edge" http-equiv="X-UA-Compatible">
<meta name="description" content="A new Flutter project.">
<!-- iOS meta tags & icons -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="capenergy_ns">
<link rel="apple-touch-icon" href="icons/Icon-192.png">
<!-- Favicon -->
<link rel="icon" type="image/png" href="favicon.png"/>
<title>Freelife</title>
<link rel="manifest" href="manifest.json">
<script>
// The value below is injected by flutter build, do not touch.
var serviceWorkerVersion = null;
</script>
<!-- This script adds the flutter initialization JS code -->
<script src="flutter.js" defer></script>
</head>
<body>
<script>
window.addEventListener('load', function(ev) {
// Download main.dart.js
_flutter.loader.loadEntrypoint({
serviceWorker: {
serviceWorkerVersion: serviceWorkerVersion,
}
}).then(function(engineInitializer) {
return engineInitializer.initializeEngine();
}).then(function(appRunner) {
return appRunner.runApp();
});
});
</script>
<script src="https://www.gstatic.com/firebasejs/8.4.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.4.1/firebase-messaging.js"></script>
<script>
const firebaseConfig = {
apiKey: "AIz...",
authDomain: "fre...",
projectId: "fre...",
storageBucket: "free...",
messagingSenderId: "53...",
appId: "1:538....",
measurementId: "G-X..."
};
firebase.initializeApp(firebaseConfig);
</script>
<script src="main.dart.js" type="application/javascript"></script>
<script>
if ("serviceWorker" in navigator) {
window.addEventListener("load", function () {
navigator.serviceWorker.register("firebase-messaging-sw.js");
});
}
</script>
</body>
</html>
I have solved the issue changing index.html as follows:
<!DOCTYPE html>
<html>
<head>
<!--
If you are serving your web app in a path other than the root, change the
href value below to reflect the base path you are serving from.
The path provided below has to start and end with a slash "/" in order for
it to work correctly.
For more details:
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
This is a placeholder for base href that will be replaced by the value of
the `--base-href` argument provided to `flutter build`.
-->
<base href="/webapp/">
<meta charset="UTF-8">
<meta content="IE=Edge" http-equiv="X-UA-Compatible">
<meta name="description" content="A new Flutter project.">
<!-- iOS meta tags & icons -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="freelife">
<link rel="apple-touch-icon" href="icons/Icon-192.png">
<!-- Favicon -->
<link rel="icon" type="image/png" href="favicon.png"/>
<title>capenergy_ns</title>
<link rel="manifest" href="manifest.json">
<script>
// The value below is injected by flutter build, do not touch.
var serviceWorkerVersion = null;
</script>
<!-- This script adds the flutter initialization JS code -->
<script src="flutter.js" defer></script>
</head>
<body>
<script>
window.addEventListener('load', function(ev) {
// Download main.dart.js
_flutter.loader.loadEntrypoint({
serviceWorker: {
serviceWorkerVersion: serviceWorkerVersion,
}
}).then(function(engineInitializer) {
return engineInitializer.initializeEngine();
}).then(function(appRunner) {
return appRunner.runApp();
});
});
</script>
<script src="https://www.gstatic.com/firebasejs/8.4.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.4.1/firebase-messaging.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.4.1/firebase-auth.js"></script>
<script type="module">
// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
apiKey: "AIza...",
authDomain: "fre...",
projectId: "fre...",
storageBucket: "free...",
messagingSenderId: "538...",
appId: "1:...",
measurementId: "G-..."
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);
</script>
<script src="main.dart.js" type="application/javascript"></script>
<script>
if ("serviceWorker" in navigator) {
window.addEventListener("load", function () {
navigator.serviceWorker.register("/firebase-messaging-sw.js");
});
}
</script>
</body>
</html>
And then on main.dart, I have updated the piece of code:
Future<void> main() async {
WidgetsFlutterBinding.ensureInitialized();
await EasyLocalization.ensureInitialized();
await Firebase.initializeApp(
options: const FirebaseOptions(
apiKey: "AIza....",
appId: "1:5389...",
messagingSenderId: "...",
projectId: "...")
);
I've got the following map on my website initialised from js.
How do I disable city names like how other countries are shown?
You can use a custom style as shown in the sample below:
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<script>
var map;
var hiddenCityLabels = {
"version": "1.0",
"elements": {
"point": {
"labelVisible": false,
"visible":false
}
}
};
function GetMap()
{
map = new Microsoft.Maps.Map('#myMap', {
customMapStyle: hiddenCityLabels
});
}
</script>
</head>
<body>
<div id="myMap" style="position:relative;width:100%;height:600px;"></div>
<script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?callback=GetMap&key=<Your Bing Maps Key>'></script>
</body>
</html>
I am trying to use import in the script I loaded in HTML, but the error occurs:
Uncaught ReferenceError: require is not defined.
I am trying to order my code with classes in typescript. Does that mean everything I write for the renderer process in vscode extensions has to be in one js file?
New to extension programming, any help appreciated.
Here is how I build HTML:
webviewPanel.webview.html = getHtmlTemplate(webviewPanel, this.context);
and my HTML looks like:
export function getHtmlTemplate(webviewPanel: vscode.WebviewPanel, context: vscode.ExtensionContext) : string {
const scriptUri = webviewPanel.webview.asWebviewUri(vscode.Uri.joinPath(
context.extensionUri, 'out', 'main.js'));
const styleResetUri = webviewPanel.webview.asWebviewUri(vscode.Uri.joinPath(
context.extensionUri, 'media', 'reset.css'));
const styleVSCodeUri = webviewPanel.webview.asWebviewUri(vscode.Uri.joinPath(
context.extensionUri, 'media', 'vscode.css'));
const styleMainUri = webviewPanel.webview.asWebviewUri(vscode.Uri.joinPath(
context.extensionUri, 'media', 'style.css'));
// Use a nonce to whitelist which scripts can be run
const nonce = getNonce();
return `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--
Use a content security policy to only allow loading images from https or from our extension directory,
and only allow scripts that have a specific nonce.
-->
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src ${webviewPanel.webview.cspSource}; style-src ${webviewPanel.webview.cspSource}; script-src 'nonce-${nonce}';">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="${styleResetUri}" rel="stylesheet" />
<link href="${styleVSCodeUri}" rel="stylesheet" />
<link href="${styleMainUri}" rel="stylesheet" />
<title>Cat Scratch</title>
</head>
<body>
<div class="container">
<div class="split left">
<h1>Story Editor</h1>
</div>
<div class="split right">
<h1>Story Blueprint</h1>
<div class="nodes">
<div class="add-button">
<button>Create Node</button>
</div>
</div>
<canvas id = "_canvas"></canvas>
</div>
</div>
<script nonce="${nonce}"> var exports = {}; </script>
<script nonce="${nonce}" src="${scriptUri}"></script>
</body>
</html>`;
}
I am writing main.ts which will be compile into main.js, and I would like to use import in main.ts
I have a little NodeJS server, which an index.html invites me over serve-static.
Is it somehow possible that are contained in the index.html functions of NodeJS?
Theoretically, I could of course solve the whole problem with express routes, but possibly there is also another solution
var serve = serveStatic(__dirname+"/../Websites", {'index': ['index.html']});
// Create server
var server = https.createServer(options,function onRequest (req, res) {
serve(req, res,finalhandler(req, res));
})
// Listen
server.listen(443, function(){
console.log('WebServer running on 443...');
});
index.html
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<script>
var hello = require('hello');
console.log(hello.sayHello());
</script>
<div>TODO write content</div>
</body>
</html>
I'm following the basic tutorial for Leaflet-angular-directive. I am able to see the leaflet map component display in the browser, but the map is blank. The example:
<html ng-app="demoapp">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="../bower_components/angular/angular.min.js"></script>
<script src="../bower_components/leaflet/dist/leaflet.js"></script>
<script src="../dist/angular-leaflet-directive.min.js"></script>
<link rel="stylesheet" href="../bower_components/leaflet/dist/leaflet.css" />
<script>
var app = angular.module("demoapp", ['leaflet-directive']);
app.controller("BasicFirstController", [ "$scope", function($scope) {
// Nothing here!
}]);
</script>
</head>
<body ng-controller="BasicFirstController">
<leaflet width="100%" height="480px"></leaflet>
<h1>First steps, basic example</h1>
</body>
</html>
I don't see where the API key or tile urls is passed, or is it not required?
Thanks!
You code is ok. It works form me with these dependencies ( Angular 1.4.9 ) :
<script src="http://cdn.leafletjs.com/leaflet-0.7.1/leaflet.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-mocks/angular-mocks.js"></script>
<script src="angularLealeft/angular-leaflet-directive.min.js"></script>
There is no need for API key.