I have sent email using my html template.But when i send this email to Gmail / Yahoo then image not showing When i check inspect email body elements, infront of image some other tags are added.
I have added jpg / png images.result is same
My Html template
<table>
<tbody>
<tr>
<img src="https://svgshare.com/i/DqF.svg" alt="" style="width:200px;height:200px;" />
</tr>
</tbody>
</table>
Inspected Gmail Body
<img src="https://ci6.googleusercontent.com/proxy/qX7T2O0am5PVOmfbHSLTZLdjuN0J3o0kiJi1YLNNf3vBGQe9j0YtQrA9aw4wyZWcbg=s0-d-e1-ft#https://svgshare.com/i/DqF.svg" alt="" style="width:200px;height:200px" class="CToWUd">
svg files are not supported by all email clients, Gmail is one of them. Yahoo I don't know. You should convert the svg file to png of jpg with any of the following tools:
https://www.google.com/search?q=svg+to+png+converter+online
Gmail and Yahoo don't support svg as far as I know.
You can look at this question from a few years ago that might help:
Is there a trick to display svg images in gmail?
Related
I am writing a mail class in Laravel that show a svg file from url inside an imp tag. When the email is sent the svg file is replaced with a blue question mark and is not showing the alt text. But when I view the blade as a web page it is working fine.
Here is the code for the svg file:
<a href="{{ $url }}">
<img alt="SVG" height="36" src='https://exmaple.com/someFile.svg' width="127">
</a>
Thanks in advance
Many email clients don't support SVG. Unfortunately, email clients don't update like browsers.
You can follow this link for the guidelines about using SVG in mail.
http://stylecampaign.com/blog/2014/01/basics-of-svg-in-email/
I know, I should use something like Bulletproof Email Buttons service for such purposes, but I have a case, where I need to use an image wrapped with an <a> tag to represent a link in my email template. I ran a test with testi.at and it appears to be represented correctly for almost 100% of clients (up to Outlook 2007). I cannot check if such image link is 100% clickable though. My question is if there are any known issues with this approach?
<tr>
<td style="text-align: center;">
<a href="http://example.com">
<img src="https://some-image-src.png" width="100" height="50" alt="Sample image" />
</a>
</td>
</tr>
This is a very common practice and there is no downside that I can think of. One recommandation I'd make is to add the following styles on your image element:
vertical-align:middle; This prevents a small gap to appear below images in email clients using an HTML5 doctype.
border:none; This prevents a blue outline to appear on older email clients running on Internet Explorer’s rendering engine (like Outlook 2003 for example).
Also, be careful, there's a typo in your code (scr instead of src).
My HTML email template has a few images. All images are saved and served from the same Google Cloud Platform Storage Bucket and all images are set to be publicly available.
When the email is delivered, Gmail only loads half the images. In the other half, it removes the src attribute altogether! The same template works fine when I open it in Chrome and the same emails works great on Outlook.com as well. See the example of what the <img> tag looks like in Gmail below:
<img alt="image" style="display:block" width="191">
The HTML block for that specific image looks like this:
<td align="center">
<a href="#" target="_blank">
<img src="http://storage.googleapis.com/tripcloud-email-assets/campaigns/1-holidays-2016/banner-content-1.png" alt="image" border="0" height="67" width="199">
</a>
</td>
The only other thread I found about this subject was this but I did not have a similar error and so, it was unrelated. Can someone please tell me why this might be happening?
I can suggest you two options-
Don't use imagenames like googleads or googleadspreview. Just avoid 'ads words'.
If it removes src attribute, you can add it with jQuery.
Outlook just displays a small box with a red X, when I test my HTML email. All the images looks like this:
<td align="center">
<img src="https://c1.staticflickr.com/6/5516/29542162544_71ebdbac9f_z.jpg" alt="second-typo" style="display: block;" width="100%"/>
</td>
Is there any solution, to fix this?
Outlook does not download remote images unless the user explicitly allows Outlook to do that for that particular email.
Embed the images as an attachments and refer to it through the cid (<img src=cid:xyz>). Note that Outlook does not support embedding binary data into the img tag.
I am sending a html table with an image of google map.for mozilla Thunderbird image is appearing without any problem.but for gamil and yahoo mail image is not appearing.even a broken image.is there any reason for that? here is the image tag I attached to the table
<image src = "http://maps.googleapis.com/maps/api/staticmap?path='+startCity+'|'+dueTodrawPath+endCity+'&size=500x200&maptype=roadmap&sensor=true" />'
shouldn't it be <img src="" />
<image> is not a valid tag, you should be using <img>