Taking inspiration from the answers in this StackOverflow post from years ago, I successfully created an email tracker image using Google Sheets. It functionally works to track but it shows a [?] icon instead of an image I am trying to make it show.
I simply have to copy and paste the image generated from this html <img src="https://script.google.com/macros/s/AKfycbyRRnH5iALMqMlgMs3QiWcdI3LiXgLXBtYTGNVBppmsKi_7-0An5PTmrSt0JYLT7m5g/exec?src=CodePen" />
into an email, and I am able to successfully track when an email is opened right into my Google Sheet
Here's the AppScript code I use, so you can test it too, and this is the CodePen from which I copy the rendered Email Tracker image to my Gmail compose message
I want to be able to send with an actual image instead of the [?]
If you use this code <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="/>
the browser will show a red dot, so I tried to make the GET API call return that date...==
value as a Text, thinking that the HTML would pick it up, but that didn't work either. Any ideas?
UPDATE 1:
I improved the body of my question to reduce confusion. Based on the comment, I tried to use this approach to update my AppScript to return an HTML object using an image url as well as the SVG data...==
object that I shared above but neither worked, I was still getting a [?] and making a GET API call now returns this in Postman
<!doctype html>
<html>
<head>
<meta name="chromevox" content-script="no">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"
nonce="VO2qwIJjLxZif_nTwjioww">
<link rel="stylesheet" href="/static/macros/client/css/2972996970-mae_html_css_ltr.css">
<script type="text/javascript" src="/static/macros/client/js/4136683848-warden_bin_i18n_warden.js"></script>
</head>
<body>
<table id="warning-bar-table" class="full_size" cellspacing="0" cellpadding="0">
<tr>
<td>
<div id="warning" class="warning-bar"></div>
</td>
</tr>
<tr>
<td style="height: 100%"><iframe id="sandboxFrame"
allow="accelerometer *; ambient-light-sensor *; autoplay *; camera *; clipboard-read *; clipboard-write *; encrypted-media *; fullscreen *; geolocation *; gyroscope *; magnetometer *; microphone *; midi *; payment *; picture-in-picture *; screen-wake-lock *; speaker *; sync-xhr *; usb *; web-share *; vibrate *; vr *"
sandbox="allow-downloads allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-top-navigation-by-user-activation allow-storage-access-by-user-activation">
</iframe>
</td>
</tr>
</table>
<script nonce="0SAAOkgbuqtmkYBmeBotjA">
(function() {
var el = document.getElementById('sandboxFrame');
el.onload = function() {
goog.script.init("\x7b\x22functionNames\x22:\x5b\x22doPost\x22,\x22doGet\x22,\x22processResult\x22,\x22processRequest\x22,\x22test\x22,\x22testGet\x22\x5d,\x22sandboxMode\x22:\x22IFRAME_SANDBOX\x22,\x22callbackTimeout\x22:390000,\x22deploymentId\x22:\x22AKfycbyV9pX-2IejSGmic_bxCcm-uAGehnB5HoqPdLloyv0nnjf2Kw5zWbfHntJEFd0LGM2P\x22,\x22eei\x22:\x22\x22,\x22sandboxHost\x22:\x22https:\/\/n-hsuo5icdlgt7jj4tkbxzfgmypt6kltl2howxigy-0lu-script.googleusercontent.com\x22,\x22clientSideProperties\x22:\x7b\x22google.script.sandbox.mode\x22:\x22IFRAME_SANDBOX\x22,\x22google.script.host.origin\x22:\x22https:\/\/docs.google.com\x22\x7d,\x22actionPrefix\x22:\x22\/macros\/s\/AKfycbyV9pX-2IejSGmic_bxCcm-uAGehnB5HoqPdLloyv0nnjf2Kw5zWbfHntJEFd0LGM2P\x22,\x22userHtml\x22:\x22\x3cimg src \x3d \\\x22https:\/\/deafassistant.com\/images\/logo-dark.png\\\x22\x3e\x22,\x22ncc\x22:\x22\x7b\\\x22awhs\\\x22:true\x7d\x22\x7d", "", undefined, true , false , "false", "https:\/\/n-hsuo5icdlgt7jj4tkbxzfgmypt6kltl2howxigy-0lu-script.googleusercontent.com", "\/\/drive.google.com\/abuse?id\x3dAKkXjoyWDgnsm9PsAF_BuBBvs0iOEeCXFbzzoMzKOqvAqAHlCbFd9J-o-WpTmnhuQ86AXAeDF6ywqfnS-O0oRRwHFebQx4ydYFg5B6fX%3A0");}
el.src = 'https:\/\/n-hsuo5icdlgt7jj4tkbxzfgmypt6kltl2howxigy-0lu-script.googleusercontent.com\/userCodeAppPanel';
}());
</script>
</body>
</html>
If you cannot make a proxy that returns an image, then try this which may or may not be loaded by the email client
<img height="1" width="1" style="visibility:hidden"
src="https://script.google.com/macros/s/AKfycbyRRnH5iALMqMlgMs3QiWcdI3LiXgLXBtYTGNVBppmsKi_7-0An5PTmrSt0JYLT7m5g/exec?src=CodePen" />
An alternative to an actual proxy is to use mod rewrite