HTML Newsletter picture problem

Hangin' Around Joined: Feb 10, 2007 Posts: 27

Hi......again Embarassed

Another slight problem, probably a case of Intel inside Idiot outside Crying or Very sad

Every time I send a newsletter with pictures, the pictures don't get displayed in the received email? But they are there if I preview the newsletter before I send it.

Email client (Thunderbird) is not blocking the picture. Picture frame is there but no picture Confused

Thanks

Subject Matter Expert Joined: Feb 23, 2004 Posts: 358

Is this a localhost XAMPP type of server, or is this professionally hosted remotely?

- Keith

Posted: Wed Jan 05, 2011 3:53 pm

Hi Keith,
Its hosted remotely by a company called Krystal web hosting (UK)

Posted: Wed Jan 05, 2011 8:00 pm

You need to view to source of the newsletter and see where it is looking for the pictures.

Posted: Wed Jan 05, 2011 8:04 pm

Yes, as Palbin advised...

Check the source for the email. Also, are you sure you or the people complaining actually have HTML enabled in the email client? Many clients have to have this enabled, and even after it's enabled, it might block some images (even though the email seems to be properly formatted with markup).

If you could pull some source with example links to images and post it here between code tags, it would be helpful.

- Keith

Posted: Wed Jan 05, 2011 9:58 pm

I have a feeling that they are relative and not absolute.

Posted: Thu Jan 06, 2011 4:33 am

Thanks for your help Very Happy

I tried to send a test newsleter to admin only with two pictures on it.
The pictures are located on the server at
/uploads/image/Banner1c.gif
/uploads/image/darryl.jpg
Checked the folder and files on the server via filezilla, they do exist

Source code

Code:

<p style="text-align: center;"><img height="191" width="476" src="/uploads/image/Banner1c.gif" alt="" /></p>


<p style="text-align: center;">&nbsp;</p>


<p style="text-align: left;">Test message to see if pictures are being send</p>


<p style="text-align: left;">&nbsp;</p>


<p style="text-align: left;"><img height="544" width="816" src="/uploads/image/darryl.jpg" alt="" /></p>


<p style="text-align: left;">&nbsp;</p>


<p style="text-align: left;">&nbsp;</p>

Looked at the email, same as before, no pictures beening displayed, here's the source code of the email

Code:

Return-path: <s6auicou@ares.krystal.co.uk>


Envelope-to: admin@nogsport.co.uk


Delivery-date: Thu, 06 Jan 2011 10:16:17 +0000


Received: from s6auicou by ares.krystal.co.uk with local (Exim 4.69)


   (envelope-from <s6auicou@ares.krystal.co.uk>)


   id 1PamtF-00027C-6P


   for admin@nogsport.co.uk; Thu, 06 Jan 2011 10:16:17 +0000


To: admin@nogsport.co.uk


Subject: Test Newsletter from Nogsport


MIME-Version: 1.0


Content-Type: text/html; charset=iso-8859-1


From: Mark<admin@nogsport.co.uk>


Reply-To: admin@nogsport.co.uk


X-Mailer: MSHNL


X-Sender-IP: 


X-Priority: 3


Message-Id: <E1PamtF-00027C-6P@ares.krystal.co.uk>


Date: Thu, 06 Jan 2011 10:16:17 +0000











<!-- Hi  Your System cannot read HTML-Mails! Following message was send to you: <p style="text-align: center;"><img height="191" width="476" alt="" src="/uploads/image/Banner1c.gif" /></p>


<p style="text-align: center;">&nbsp;</p>


<p style="text-align: left;">Test message to see if pictures are being send</p>


<p style="text-align: left;">&nbsp;</p>





<p style="text-align: left;"><img height="544" width="816" alt="" src="/uploads/image/darryl.jpg" /></p>


<p style="text-align: left;">&nbsp;</p>


<p style="text-align: left;">&nbsp;</p> -->


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"


   "http://www.w3.org/TR/html4/loose.dtd">


<html>


<head>





<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">


<title>Nogsport Email</title>


<style type="text/css">





<!--





a:link,a:active,a:visited{ background-color: transparent; color: #000000; text-decoration: none; }


a:hover{ background-color: transparent; color: #000000; text-decoration: underline; }


body { background: #000000; color: #000000; font-family: Verdana, Helvetica, sans-serif; font-size: 12px; text-decoration: none; }


div#banner { text-align: center; vertical-align: middle; }


div#main { background: #CCCCCC; border: 1px solid #000000; color: #000000; font-family: Verdana, Helvetica, sans-serif; margin: 2% 2% 2% 2%; padding: 2% 2% 2% 2%; text-decoration: none; }


div#subtitle { background: #F5F5F5; border: 1px solid #000000; color: #000000; font-family: Verdana, Helvetica, sans-serif; font-size: 10px; font-weight: bold; margin-bottom: 5px; margin-top: 5px; padding: 2px 2px 2px 2px; text-decoration: none; }


div#title { background: #808080; border: 1px solid #000000; color: #000000; font-family: Verdana, Helvetica, sans-serif; font-size: 18px; font-weight: bold; margin-bottom: 5px; margin-top: 5px; padding: 10px 10px; text-align: center; text-decoration: none; text-shadow: #D3D3D3; }


div#unsub { background-color: transparent; color: #F5F5F5; font-family: Verdana, Helvetica, sans-serif; font-size: 9px; text-decoration: none; }


tr.row { background-color: #FFFFFF; color: #000000; font-family: Verdana, Helvetica, sans-serif; font-size: 10px; text-decoration: none; }


.bar { border: 1px solid #000000; margin-bottom: 5px; margin-top: 5px; }


.content { background: #F5F5F5; border: 1px solid #000000; color: #000000; font-family: Verdana, Helvetica, sans-serif; font-size: 12px; margin-bottom: 5px; margin-top: 5px; padding: 5px 5px 5px 5px; text-decoration: none; }


.subtitle { background: #FFFFFF; color: #000000; font-family: Verdana, Helvetica, sans-serif; font-size: 10px; font-weight: bold; text-decoration: none; }


.title { background: #808080; color: #000000; font-family: Verdana, Helvetica, sans-serif; font-size: 14px; font-weight: bold; text-decoration: none; }





-->





</style>


</head>


<body>


<div id="main">


   <div id="title">Newsletter from Nogsport sent on January 06 2011</div>


   <div id="subtitle">By: Mark Topic: Test</div>


   <div class="content"><p style="text-align: center;"><img height="191" width="476" alt="" src="/uploads/image/Banner1c.gif" /></p>


<p style="text-align: center;">&nbsp;</p>


<p style="text-align: left;">Test message to see if pictures are being send</p>





<p style="text-align: left;">&nbsp;</p>


<p style="text-align: left;"><img height="544" width="816" alt="" src="/uploads/image/darryl.jpg" /></p>


<p style="text-align: left;">&nbsp;</p>


<p style="text-align: left;">&nbsp;</p></div>


   <div class="bar"></div>


   


   


   


   


   


</div>


   <div id="banner"></div>


   <div class="bar"></div>


   <div id="unsub">You received this email because you are a registered user of Nogsport, if you dont want to receive mail from Nogsport, please let us know by following this <a href="mailto:admin@nogsport.co.uk?subject=Newsletter">link</a>.</div>





</body>


</html>

Checked the settings in Thunderbird: View - Message Body As - Original HTML

Think we're winning...
I sent another test message, this time linking pictures from my photobucket account.
Sent the message, opened up Thinderbird, email message was there with a message saying "Display remote content", clicked on yes, then the pictures loaded

Posted: Thu Jan 06, 2011 5:03 am

Palbin nailed it, you are using relative URLs for the image links, you need absolute, so..

Code:

<img height="544" width="816" src="/uploads/image/darryl.jpg" alt="" />

needs to have http://your.server.com in the src

Code:

<img height="544" width="816" src="http://www.example-server.com/uploads/image/darryl.jpg" alt="" />

- Keith

Posted: Thu Jan 06, 2011 6:27 am

That's sorted it
Thanks for your help, very much appreciated
RavensScripts