There are two ways how to host our images:
1 - Image hosting websites
- get the url for the image then use it as the src for the img tag
2 - Google Drive
- get the image ID thru the link
- use the template
<img src="https://drive.google.com/thumbnail?id=1WkCDv7FBdfXffLmHQNOoP7C5hu5IVehS" alt="my image"/>
where 1WkCDv7FBdfXffLmHQNOoP7C5hu5IVehS is the ID of the image
Code:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" >
<script>
function buttonClicked(){
google.script.run.withSuccessHandler(function(response){
var msgDiv = document.getElementById("messageDiv");
msgDiv.innerText = response;
}).getGreetings();
}
</script>
</head>
<body>
<img src="https://drive.google.com/thumbnail?id=1WkCDv7FBdfXffLmHQNOoP7C5hu5IVehS" alt="my image from google drive"/>
<img src="https://imagizer.imageshack.com/v2/640x480q70/922/zzcOPK.jpg" alt="My Bike" width="300" height="200"/>
<h1>HELLO GOOGLE APPS SCRIPT WEB APPS!</h1>
<h1>Please be good to me...</h1>
<h2>Hello World!</h2>
<button class="btn btn-primary" onclick="buttonClicked()">Click Me</button>
<div id="messageDiv"></div>
</body>
</html>
