htmloutlook
Why won't my pictures load on this signature html
<html>
<table border="0" cellspacing="0" cellpadding="0" width="643" style="width:17.0cm;border-collapse:collapse">
<tbody>
<tr style="height:61.7pt">
<td width="191" style="width:143.0pt;padding:0cm 0cm 0cm 0cm;height:61.7pt">
<p class="MsoNormal">
<span lang="EN-US" style="font-size:8.0pt;font-family:"Gotham Light";color:#002060">Maria Laura Quirós<u></u><u></u>
</span>
</p>
<p class="MsoNormal">
<span lang="EN-US" style="font-size:8.0pt;font-family:"Gotham Light";color:#002060">Directora & Socia Door Training and Consulting Costa Rica<u></u><u></u></span>
</p>
<p class="MsoNormal">
<span style="font-size:8.0pt;font-family:"Gotham Light";color:#002060">T</span>
<span style="font-size:12.0pt;color:#002060"> </span>
<span style="font-size:8.0pt;font-family:"Gotham Light";color:#002060">+506 4030 1649<u></u><u></u></span>
</p>
<p class="MsoNormal">
<span style="font-size:8.0pt;font-family:"Gotham Light";color:#002060">M +506 6043 5752<u></u><u></u></span>
</p>
<p class="MsoNormal">
<span lang="EN-US" style="font-size:12.0pt">
<a href="mailto:[email protected]" target="_blank">
<span lang="DE" style="font-size:8.0pt;font-family:"Gotham Light";color:blue">[email protected]</span>
</a>
</span>
<span style="font-size:8.0pt;font-family:"Gotham Light";color:#002060"><u></u><u></u>
</span>
</p>
</td>
<td width="86" style="width:64.8pt;border:none;border-right:solid windowtext 1.0pt;padding:0cm 0cm 0cm 0cm;height:61.7pt">
<p class="MsoNormal" align="center" style="text-align:center">
<a href="https://www.doorconsultingcr.com/" target="_blank" data-saferedirecturl="https://www.google.com/url?q=https://www.doorconsultingcr.com/&source=gmail&ust=1709853941252000&usg=AOvVaw1E3AGDFC_gSZJCB0E1PIks">
<span lang="EN-US" style="color:windowtext;text-decoration:none">
<img border="0" width="71" height="71" style="width:.7395in;height:.7395in" id="m_2269416675111168282Picture_x0020_600157449" src="https://mail.google.com/mail/u/0?ui=2&ik=1ebfc63c3f&attid=0.2&permmsgid=msg-f:1792799726534911592&th=18e14dda4587e668&view=fimg&fur=ip&sz=s0-l75-ft&attbid=ANGjdJ_QzdP_BA8rRCFWZkvoA---jaePk6Jy6Q9ERJbz9yDJSfb0DWK40Nqrp6ok1GJvQ4iEeRbX2YTIurS1XFFILnqQgvigSbPJwcxuQggLV8orc-GFi2cITOBkY_E&disp=emb" alt="A logo with text and confetti
Description automatically generated" data-image-whitelisted="" class="CToWUd" data-bit="iit">
</span>
</a>
<span lang="EN-US" style="font-size:12.0pt"><u></u><u></u></span>
</p>
</td>
<td width="36" style="width:27.3pt;border:none;border-right:solid windowtext 1.0pt;padding:0cm 0cm 0cm 0cm;height:61.7pt">
<p class="MsoNormal" align="center" style="margin-top:1.5pt;text-align:center;line-height:150%">
<a href="https://www.linkedin.com/company/door-training-and-consulting-costa-rica/" target="_blank" data-saferedirecturl="https://www.google.com/url?q=https://www.linkedin.com/company/door-training-and-consulting-costa-rica/&source=gmail&ust=1709853941252000&usg=AOvVaw3-_OjgEpRhwBWJ8L8PO4tQ">
<span lang="EN-GB" style="font-size:8.0pt;line-height:150%;color:windowtext;text-decoration:none">
<img border="0" width="22" height="22" style="width:.2291in;height:.2291in" id="m_2269416675111168282Picture_x0020_525036754" src="https://mail.google.com/mail/u/0?ui=2&ik=1ebfc63c3f&attid=0.3&permmsgid=msg-f:1792799726534911592&th=18e14dda4587e668&view=fimg&fur=ip&sz=s0-l75-ft&attbid=ANGjdJ_kBLBVrRwT_TEYLnjZaPsXq5uo4Ayqf_PqqoNIZZAKNWVdFpkKChq46C7WCuNgVC1QVCPF0gayJtRB-Yc19ryZYPQiiSj7TCAvYaQliox2v9Z4sjtUdH1WEgA&disp=emb" alt="A pink and black logo
Description automatically generated" data-image-whitelisted="" class="CToWUd" data-bit="iit" jslog="32272; 1:WyIjdGhyZWFkLWY6MTc5Mjc5OTcyNjUzNDkxMTU5MiJd; 4:WyIjbXNnLWY6MTc5Mjc5OTcyNjUzNDkxMTU5MiJd">
</span>
</a>
<span lang="EN-GB" style="font-size:8.0pt;line-height:150%"><u></u><u></u>
</span>
</p>
<p class="MsoNormal" align="center" style="margin-top:1.5pt;text-align:center;line-height:150%">
<a href="https://www.instagram.com/doortraining.cr" target="_blank" data-saferedirecturl="https://www.google.com/url?q=https://www.instagram.com/doortraining.cr&source=gmail&ust=1709853941252000&usg=AOvVaw06wuOIR7yGlqHGUzaQSzGt">
<span lang="EN-GB" style="font-size:8.0pt;line-height:150%;color:windowtext;text-decoration:none">
<img border="0" width="22" height="22" style="width:.2291in;height:.2291in" id="m_2269416675111168282Picture_x0020_457716067" src="https://mail.google.com/mail/u/0?ui=2&ik=1ebfc63c3f&attid=0.4&permmsgid=msg-f:1792799726534911592&th=18e14dda4587e668&view=fimg&fur=ip&sz=s0-l75-ft&attbid=ANGjdJ_Q9ir3aazBvAhZiEmr-fbVxxuoxCLRluqK8Pl-tM1EovWCQz8HzzQprz4T-voTy0NAM77oysvewVnl0E7ZfowVZicO0eb2GqDH5l61sh6bjQNk7IERWvxpVl4&disp=emb" alt="A logo of a camera
Description automatically generated" data-image-whitelisted="" class="CToWUd" data-bit="iit">
</span>
</a>
<span lang="EN-GB" style="font-size:8.0pt;line-height:150%"><u></u><u></u>
</span>
</p>
<p class="MsoNormal" align="center" style="margin-right:0cm;margin-bottom:6.0pt;margin-left:0cm;text-align:center;line-height:150%">
<a href="https://www.facebook.com/doorconsultingcr" target="_blank" data-saferedirecturl="https://www.google.com/url?q=https://www.facebook.com/doorconsultingcr&source=gmail&ust=1709853941253000&usg=AOvVaw0P1DLkg5lfgbTGWA6z5wnQ">
<span lang="EN-GB" style="font-size:8.0pt;line-height:150%;color:windowtext;text-decoration:none">
<img border="0" width="22" height="22" style="width:.2291in;height:.2291in" id="m_2269416675111168282Picture_x0020_129888742" src="https://mail.google.com/mail/u/0?ui=2&ik=1ebfc63c3f&attid=0.5&permmsgid=msg-f:1792799726534911592&th=18e14dda4587e668&view=fimg&fur=ip&sz=s0-l75-ft&attbid=ANGjdJ9obUW0PsGgtFTd3p73qGSjfGiEG_Acucq7nF9FoGDZSMEnX0HwW0Dk-WlBR4y7TuiJftOcTV8yMI_iJCGXagFMid66fisnoUk_mQRF75VGvnQ7qzCRHHHLz84&disp=emb" alt="A black and pink logo
Description automatically generated" data-image-whitelisted="" class="CToWUd" data-bit="iit">
</span>
</a>
<span lang="EN-GB" style="font-size:8.0pt;line-height:150%"><u></u><u></u>
</span>
</p>
</td>
<td width="263" style="width:197.25pt;padding:0cm 0cm 0cm 0cm;height:61.7pt">
<p class="MsoNormal">
<a href="https://www.doorconsultingcr.com/leadership-architecture" target="_blank" data-saferedirecturl="https://www.google.com/url?q=https://www.doorconsultingcr.com/leadership-architecture&source=gmail&ust=1709853941253000&usg=AOvVaw24D1u9F7hbxiMODd5GO7--">
<span lang="EN-GB" style="font-size:8.0pt;color:windowtext;text-decoration:none">
<img border="0" width="248" height="76" style="width:2.5833in;height:.7916in" id="m_2269416675111168282Picture_x0020_943383402" src="https://mail.google.com/mail/u/0?ui=2&ik=1ebfc63c3f&attid=0.6&permmsgid=msg-f:1792799726534911592&th=18e14dda4587e668&view=fimg&fur=ip&sz=s0-l75-ft&attbid=ANGjdJ_O60ATPym9axyj0ld_J88NFazs9UrzUlumxdwJFE2HKWJ6kkMC7dO06xmBBO2G9mn2oR8_TQVsjzublsF3BKTXceBRTJHrLoxB1AQgvr7-gDPkB0GkhZzL16k&disp=emb" alt="A black background with blue text
Description automatically generated" data-image-whitelisted="" class="CToWUd" data-bit="iit">
</span>
</a>
<span lang="EN-GB" style="font-size:8.0pt"><u></u><u></u>
</span>
</p>
</td>
<td width="66" style="width:49.6pt;padding:0cm 0cm 0cm 0cm;height:61.7pt">
<p class="MsoNormal">
<a href="https://www.doorconsultingcr.com/leadership-architecture" target="_blank" data-saferedirecturl="https://www.google.com/url?q=https://www.doorconsultingcr.com/leadership-architecture&source=gmail&ust=1709853941253000&usg=AOvVaw24D1u9F7hbxiMODd5GO7--">
<span lang="EN-US" style="font-size:12.0pt;color:windowtext;text-decoration:none">
<img border="0" width="73" height="73" style="width:.7604in;height:.7604in" id="m_2269416675111168282Picture_x0020_732619802" src="https://mail.google.com/mail/u/0?ui=2&ik=1ebfc63c3f&attid=0.7&permmsgid=msg-f:1792799726534911592&th=18e14dda4587e668&view=fimg&fur=ip&sz=s0-l75-ft&attbid=ANGjdJ-29FMgjYqItFD990VR0dUPNPfR8aKheoOykHsx4CJ83A3PATA3PeDPRa2NQiMXewpmOmrH6w9OB3y0gy9qNBKcZcDcaf0AAH0iKGjvHDQT0UFuxliCkrHRIL4&disp=emb" alt="A white background with black and white clouds
Description automatically generated" data-image-whitelisted="" class="CToWUd" data-bit="iit">
</span>
</a>
<span lang="EN-GB" style="font-size:8.0pt"><u></u><u></u>
</span>
</p>
</td>
</tr>
</tbody>
</table>
</html>
I've made this HTML file on VS to make a signature for outlook. The issue is that the pictures won't load from the sender's nor the receiver's end. When I open the HTML file on my computer the pictures are there. Not sure if I'm missing something or if I'm completely off, but any pointers would be apriciated
Receiver POV (I did try to click on load pictures but it stayed the same)
Sender POV (I did try to click on load pictures but it stayed the same)
How it's supposed to look like
Solution
The image sources you're using seem to point to attachment images within an email you received in gmail: https://mail.google.com/mail/u/0?ui=2&ik=1ebfc63c3f&attid=0.7&permmsgid=msg-f:1792799726534911592&th=18e14dda4587e668&view=fimg&fur=ip&sz=s0-l75-ft&attbid=ANGjdJ-29FMgjYqItFD990VR0dUPNPfR8aKheoOykHsx4CJ83A3PATA3PeDPRa2NQiMXewpmOmrH6w9OB3y0gy9qNBKcZcDcaf0AAH0iKGjvHDQT0UFuxliCkrHRIL4&disp=emb
You can only view those if you're logged into Gmail in your browser. Neither your email client, nor any other email client, will have a login cookie for your gmail inbox, which is why it won't work in any email. It does work if you save it as HTML file and view it in your browser, as you're logged into your gmail account there.
To solve this, you need to host the images somewhere where they're publicly availabe, embedd them into your email using MIME Multipart Mail or embed them inside your html using data-urls and base64 encoding.
- Can I use multiple labels for a form element?
- <fieldset> has no border
- How do I place two divs side by side?
- Align <hr> to the left in an HTML5-compliant way
- CSS before and after content with brackets not working
- CSS Background Image Not Displaying
- Webpage that shows a button on user entering a correct text string in an text entry field
- javascript: save <svg> element to file on disk
- Show a message if a text is copied successfully(alternative to alert)
- Maximum call stack size exceeded error
- Unexpected First Line Indentation
- how to extract the texts after the first h1 Tag?
- How do you click on an element with text in Puppeteer?
- Different page orientation for printing HTML
- Mustache.js splits HTML attibutes between whitespaces
- Two submit buttons in one form
- filling out an html img tags 'src' form based on information derived from API javascript code
- HTML 'select' element keyboard navigation
- How can I tell Google Translate to not translate a section of a website?
- How do make sure background-color covers the entire width of scrollable element, not just the visible part?
- Kendo Splitter not working well with angular on collapsing dynamic panels
- How to apply bootstrap style to inline <select> element
- How to provide a HostAttributeToken in Angular tests?
- Differentiate by section class in Selenium
- can <main> element be nested inside a div or must be a direct descendant of body?
- How to show a label only to Screen Readers - Web Accessiblity
- When do custom elements invoke lifecycle hook formStateRestoreCallback with reason argument equal to "autocomplete"?
- HTML `dialog` element: scroll content independently of background
- div display status not changed by javascript
- How to listen iframe keydown event with ReactJS