Exit
  • Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
  • 한국 커뮤니티
0

Images not showing up in HTML email

New Here ,
Jul 31, 2017 Jul 31, 2017

I have created an email in DW. The images show up in the software but not when the email is actually emailed out. I have attached images. The first picture is what the recipient should see. The second is what shows up. dw.PNGyahoo.PNG

Here is my code

<!doctype html>

<!--Quite a few clients strip your Doctype out, and some even apply their own. Many clients do honor your doctype and it can make things much easier if you can validate constantly against a Doctype.-->

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Email template By Adobe Dreamweaver CC</title>

<!-- Please use an inliner tool to convert all CSS to inline as inpage or external CSS is removed by email clients -->

<!-- important in CSS is used to prevent the styles of currently inline CSS from overriding the ones mentioned in media queries when corresponding screen sizes are encountered -->

<style type="text/css">

body {

    margin: 0;

}

body, table, td, p, a, li, blockquote {

    -webkit-text-size-adjust: none!important;

    font-family: sans-serif;

    font-style: normal;

    font-weight: 400;

}

button {

    width: 90%;

}

@media screen and (max-width:600px) {

/*styling for objects with screen size less than 600px; */

body, table, td, p, a, li, blockquote {

    -webkit-text-size-adjust: none!important;

    font-family: sans-serif;

}

table {

    /* All tables are 100% width */

    width: 100%;

}

.footer {

    /* Footer has 2 columns each of 48% width */

    height: auto !important;

    max-width: 48% !important;

    width: 48% !important;

}

table.responsiveImage {

    /* Container for images in catalog */

    height: auto !important;

    max-width: 30% !important;

    width: 30% !important;

}

table.responsiveContent {

    /* Content that accompanies the content in the catalog */

    height: auto !important;

    max-width: 66% !important;

    width: 66% !important;

}

.top {

    /* Each Columnar table in the header */

    height: auto !important;

    max-width: 48% !important;

    width: 48% !important;

}

.catalog {

    margin-left: 0%!important;

}

}

@media screen and (max-width:480px) {

/*styling for objects with screen size less than 480px; */

body, table, td, p, a, li, blockquote {

    -webkit-text-size-adjust: none!important;

    font-family: sans-serif;

}

table {

    /* All tables are 100% width */

    width: 100% !important;

    border-style: none !important;

}

.footer {

    /* Each footer column in this case should occupy 96% width  and 4% is allowed for email client padding*/

    height: auto !important;

    max-width: 96% !important;

    width: 96% !important;

}

.table.responsiveImage {

    /* Container for each image now specifying full width */

    height: auto !important;

    max-width: 96% !important;

    width: 96% !important;

}

.table.responsiveContent {

    /* Content in catalog  occupying full width of cell */

    height: auto !important;

    max-width: 96% !important;

    width: 96% !important;

}

.top {

    /* Header columns occupying full width */

    height: auto !important;

    max-width: 100% !important;

    width: 100% !important;

}

.catalog {

    margin-left: 0%!important;

}

button {

    width: 90%!important;

}

}

</style>

</head>

<body yahoo="yahoo">

<table width="100%"  cellspacing="0" cellpadding="0">

  <tbody>

    <tr>

      <td><table width="600"  align="center" cellpadding="0" cellspacing="0">

          <!-- Main Wrapper Table with initial width set to 60opx -->

          <tbody>

            <tr>

              <td><table bgcolor="#d0cfcf" class="top" width="48%"  align="left" cellpadding="0" cellspacing="0" style="padding:10px 10px 10px 10px;">

                  <!-- First header column with Logo -->

                  <tbody>

                    <tr>

                      <td style="font-size: 12px; color:#929292; text-align:center; font-family: sans-serif;">ConnectWise</td>

                    </tr>

                  </tbody>

                </table>

                <table bgcolor="#d0cfcf" class="top" width="48%"  align="left" cellpadding="0" cellspacing="0" style="padding:10px 10px 10px 10px; text-align:right">

                  <!-- Second header column with ISSUE|DATE -->

                  <tbody>

                    <tr>

                      <td style="font-size: 12px; color:#929292; text-align:center; font-family: sans-serif;">Mapping A Network Drive  |  07/30/2017</td>

                    </tr>

                  </tbody>

                </table></td>

            </tr>

            <tr>

              <!-- HTML Spacer row -->

              <td style="font-size: 0; line-height: 0;" height="20"><table width="96%" align="left"  cellpadding="0" cellspacing="0">

                  <tr>

                    <td style="font-size: 0; line-height: 0;" height="20"> </td>

                  </tr>

                </table></td>

            </tr>

            <tr>

              <!-- HTML IMAGE SPACER -->

              <td style="font-size: 0; line-height: 0;" height="20"><table align="left"  cellpadding="0" cellspacing="0" >

                  <tr>

                    <td ><img src="../Pictures/notification.PNG" width="580" height="110" alt=""/></td>

                  </tr>

                </table></td>

            </tr>

            <tr>

              <!-- HTML Spacer row -->

              <td style="font-size: 0; line-height: 0;" height="20"><table width="96%" align="left"  cellpadding="0" cellspacing="0">

                  <tr>

                    <td style="font-size: 0; line-height: 0;" height="20"> </td>

                  </tr>

                </table></td>

            </tr>

            <tr>

              <!-- Introduction area -->

              <td><table width="96%"  align="left" cellpadding="0" cellspacing="0">

                  <tr>

                    <!-- row container for TITLE/EMAIL THEME -->

                    <td align="left" style="font-size: 20px; font-weight: 300; line-height: 2.5em; color: #929292; font-family: sans-serif;">RE: Mapping A Network Drive</td>

                  </tr>

                  <tr>

                    <!-- row container for Tagline -->

                    <td align="left" style="font-size: 16px; font-weight:300; color: #929292; font-family: sans-serif;">Hello!</td>

                  </tr>

                  <tr>

                    <td style="font-size: 0; line-height: 0;" height="20"><table width="96%" align="left"  cellpadding="0" cellspacing="0">

                        <tr>

                          <!-- HTML Spacer row -->

                          <td style="font-size: 0; line-height: 0;" height="20"> </td>

                        </tr>

                      </table></td>

                  </tr>

                  <tr>

                    <!-- Row container for Intro/ Description -->

                    <td align="left" style="font-size: 14px; font-style: normal; font-weight: 100; color: #0D0D0D; line-height: 1.8; text-align:justify; padding:10px 20px 0px 20px; font-family: sans-serif;">I hope you are enjoying your week! Thank you for your inquiry about mapping a network drive. I have included a guide in this email to help with the process.

                    <ul style="list-style: none;"><li>1.    To map a network drive, you begin with the search box which can be found by clicking on either the Start button or the Windows icon on your computer.</li>

                    <li>2.    Using your search box, type This PC into the box and select "This PC" from the list of results </li>

                    <li>3. Next you'll click on the Computer tab which is located next to the File tab.</li>

                    <li>4. In the Network section you will find ‘map a network drive' demonstrated below.</li></td>

                  </tr>

                </table></td>

            </tr>

            <tr>

              <!-- HTML Spacer row -->

              <td style="font-size: 0; line-height: 0;" height="10"><table width="96%" align="left"  cellpadding="0" cellspacing="0">

                  <tr>

                    <td style="font-size: 0; line-height: 0;" height="20"> </td>

                  </tr>

                </table></td>

            </tr>

            <tr>

              <td><table cellpadding="0" cellspacing="0" align="center" width="84%" style="margin-left:12.5%" class="catalog">

                  <!-- Table for catalog -->

                  <tr>

                    <td ><table class ="responsive-table" width="48%"  cellspacing="0" cellpadding="0" align="left" style="margin: 10px 0px 10px 0px;">

                        <!-- Table container for each image and description in catalog -->

                        <tbody>

                          <tr>

                            <td><table class="table.responsiveImage" width="66%"  cellspacing="0" cellpadding="0" align="left">

                                <!-- Table container for image -->

                                <tbody>

                                  <tr>

                              <td align="left" style="padding:10px 3px 10px 3px;"><img src="../Pictures/map.PNG" width="593" height="332" alt=""/></td>

                                  </tr>

                                </tbody>

                              </table>

                              <table class="table.responsiveContent" width="66%"  cellspacing="0" cellpadding="0" align="left">

                                <!-- Table container for content -->

                                <tbody>

                                  <tr>

                                    <td><p style="font-size: 14px; font-style: normal; font-weight: normal; color: #929292;  padding: 5px 0px 0px 10px;line-height: 1.5em; font-family: sans-serif;">photo cred. https://kb.netgear.com/19864/How-do-I-map-a-network-drive-in-Windows

</tbody>

                                    <tr><td align="left" style="font-size: 14px; font-style: normal; font-weight: 100; color: #090906; line-height: 1.8; text-align:justify; padding:10px 20px 0px 20px; font-family: sans-serif;"><ul style="list-style: none;"><li>5. Clicking on the Map network drive button will open a window as seen in the image below.</li></p></tr>

                                      <a href="#" style="text-decoration:none">                                      </a></td>

                                  </tr>

                                </tbody>

                              </table></td>

                          </tr>

                        </tbody>

                      </table>

                      <table class ="responsive-table" width="48%"  cellspacing="0" cellpadding="0" align="left" style="margin: 10px 0px 10px 0px;">

                        <!-- Table container for each image and description in catalog -->

                        <tbody>

                          <tr>

                            <td><table class="table.responsiveImage" width="66%"  cellspacing="0" cellpadding="0" align="left">

                                <!-- Table container for image -->

                                <tbody>

                                  <tr>

                                    <td align="center" style="padding:10px 3px 10px 3px;"><img src="../Pictures/window.png" width="600"height="460" alt=""/></td>

                                  </tr>

                                </tbody>

                              </table>

                              <table class="table.responsiveContent" width="66%"  cellspacing="0" cellpadding="0" align="left">

                                <!-- Table container for content -->

                                <tbody>

                                  <tr>

                                    <td><p style="font-size: 14px; font-style: normal; font-weight: normal; color: #929292;  padding: 5px 0px 0px 10px;line-height: 1.5em; font-family: sans-serif;">photo cred. https://kb.netgear.com/19864/How-do-I-map-a-network-drive-in-Windows</p>

                                  <tr>

                                    <td align="left" style="font-size: 14px; font-style: normal; font-weight: 100; color: #0D0D08; line-height: 1.8; text-align:justify; padding:10px 20px 0px 20px; font-family: sans-serif;"><ul style="list-style: none;"><li>6. Select a letter from the Drive dropdown menu, this will be your network folder.</li><li>7.  For the box labeled Folder, click the Browse button and select the folder that you want to map.</li>

                                    <p><li>8. Click the finish button.</li></p>  

                                <tbody>

                                </tr><tr>

                                         <td><p style="font-size: 14px; font-style:normal; font-weight: normal; color: #0B0B02;  padding: 5px 0px 0px 10px;line-height: 1.5em; font-family: sans-serif;">You have now successfully mapped your network drive and it can be found under "This PC." From here you can connect to a shared network folder. Thank you for your inquiry! If you have any questions please let me know.</td></p>

                                         

                                 <t/body>

                                  </tr><tr>

                                         <td><img src="../Pictures/blue line.PNG" width="600" height="6" alt=""/>                                           <p style="font-size: 14px; font-style:normal; font-weight: normal; color: #0A0A06;  padding: 5px 0px 0px 10px;line-height: 1.5em; font-family: sans-serif;">Sincerely,                                 </a></td></p> </t/body>

                                         <t/body> </t/body>

                                        </tr><tr>

                                         <td><p style="font-size: 14px; font-style:normal; font-weight: normal; color: #0A0A05;  padding: 5px 0px 0px 10px;line-height: 1.5em; font-family: sans-serif;">Patricia Pothier</a></td></p>

                                  <tr> </tr>

                                </tbody>

                              </table></td>

                          </tr>

                     </tbody>

                      </table></td>

                  </tr>

                  <tr>

<tbody>

                          <tr>

                            <td><table class="table.responsiveImage" width="66%"  cellspacing="0" cellpadding="0" align="left">

                                <!-- Table container for image -->

                                <tbody>

                                  <tr> </tr>

                                </tbody>

                              </table>

                              <table class="table.responsiveContent" width="66%"  cellspacing="0" cellpadding="0" align="left">

                                <!-- Table container for content -->

                                <tbody>

                                  <tr>

                                    <td><a href="#" style="text-decoration:none">

                                    </a></td>

                                  </tr>

                                </tbody>

                              </table></td>

                          </tr>

                </tbody>

                      </table>

                      <table class ="responsive-table" width="48%"  cellspacing="0" cellpadding="0" align="left" style="margin: 10px 0px 10px 0px;">

                        <!-- Table container for each image and description in catalog -->

                        <tbody>

                          <tr>

                            <td><table class="table.responsiveImage" width="66%"  cellspacing="0" cellpadding="0" align="left">

                                <!-- Table container for image -->

                                <tbody>

                                  <tr> </tr>

                                </tbody>

                              </table>

                              <table class="table.responsiveContent" width="66%"  cellspacing="0" cellpadding="0" align="left">

                                <!-- Table container for content -->

                                <tbody>

                                  <tr> </tr>

                                </tbody>

                              </table></td>

                          </tr>

                        </tbody>

                      </table></td>

                  </tr>

                </table></td>

            </tr>

            <tr>

              <!-- HTML spacer row -->

              <td style="font-size: 0; line-height: 0;" height="20"><table width="96%" align="left"  cellpadding="0" cellspacing="0">

                  <tr> </tr>

                </table></td>

            </tr>

            <tr bgcolor="#d0cfcf">

              <td><table class="footer" width="48%"  align="left" cellpadding="0" cellspacing="0">

                  <!-- First column of footer content -->

                  <tr>

                    <td><p align="center"  style="font-size: 22px; font-weight:300; line-height: 2.5em; color: #0F0F07; font-family: sans-serif;">ConnectWise</p>

                                            <p align="center" style="font-size: 12px; color:#0E0E05; text-align:center; font-family: sans-serif;">More Time. More Growth. More of What You Love.</p></td>

                  </tr>

                </table>

                <table class="footer" width="48%"  align="left" cellpadding="0" cellspacing="0">

                  <!-- Second column of footer content -->

                  <tr>

                    <td><p style="font-size: 14px; font-style: normal; font-weight:normal; color: #0B0B0B; line-height: 1.8; text-align:justify;padding-top:10px; margin-left:20px; margin-right:20px; font-family: sans-serif;">References

                    <tr>

                        <td>

                 <p style="font-size: 8px; font-style: normal; font-weight:normal; color: #0B0B0B; line-height: 1.8; text-align:justify;padding-top:10px; margin-left:20px; margin-right:20px; font-family: sans-serif;"><li>1.

                   file:///C:/Users/Admin/Downloads/Candidate_Email_Test.html</li>

                    <li>2. https://www.laptopmag.com/articles/map-network-drive-windows-10</li><li>3. http://devnet.kentico.com/docs/7_0rc/devguide/index.html?webdav_mapping_a_network_drive.htm</li>

                    <li>4. https://www.connectwise.com/</li>

                    </p></td>

                  </tr>

                </table></td>

            </tr>

          </tbody>

        </table></td>

    </tr>

  </tbody>

</table>

</body>

</html>

5.1K
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Community Expert , Aug 01, 2017 Aug 01, 2017

You can view the image in your browser, i.e. using Chrome, right clicking the image I get a menu like

The result shows the URL as in

The url is http://devnet.kentico.com/docs/7_0rc/devguide/devguide_clip1587_zoom70.png

Click the above link and you will see the image.

Edit: Apparently this forum will not allow you to click the link to view the image. Right click the link and open in a new tab.

Translate
Community Expert ,
Jul 31, 2017 Jul 31, 2017

An email is not connected to your web server, hence you cannot use relative links, these must be absolute. As an example

<td ><img src="../Pictures/notification.PNG" width="580" height="110" alt=""/></td>

needs to be (remove the slash after the first 'h'. this was done to show the link)

<td ><img src="h/ttps://www.connectwise.com//Pictures/notification.PNG" width="580" height="110" alt=""/></td>

I also notice

file:///C:/Users/Admin/Downloads/Candidate_Email_Test.html</li>

This points to a file on your local system which will never be reachable for anyone not on your system.

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jul 31, 2017 Jul 31, 2017

Thanks, I changed it to

<td ><img src="https://www.connectwise.com//Pictures/notification.PNG" width="599" height="110" alt=""/></td>

but this comes up now,

Capture.PNG

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jul 31, 2017 Jul 31, 2017

patriciap62219227  wrote

Thanks, I changed it to

<td ><img src="https://www.connectwise.com//Pictures/notification.PNG" width="599" height="110" alt=""/></td>

Clicking the link to the image gives me

Which means that there is an incorrect link.

I can only assume that you have not uploaded the image to that location.

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jul 31, 2017 Jul 31, 2017

I appreciate your response. I tried the https with another image that was directly from the internet but it still didn't work. example.PNG

I tried to upload it from my flickr account as well and got the same response. I don't know where else to get a photo from that will work other than to save it my pictures but then I run into the file/c problem that no one else has access to.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jul 31, 2017 Jul 31, 2017

That is because it is not the correct link.

Try this link: https://www.connectwise.com/-/media/home/product-screenshots.ashx?h=132&w=360&hash=638AA7E5462AFE3FB...

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Aug 01, 2017 Aug 01, 2017

That's not the right photo but can you tell me how to figure out which links will work and which won't?

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Aug 01, 2017 Aug 01, 2017

Like if I want to take the first one from this page - Kentico CMS 7.0 RC Developer's Guide -map j.jpg

I put the url in but the photo doesn't appear in DW or in email.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Aug 01, 2017 Aug 01, 2017

Or, is it possible to use snipping tool to capture screenshots and use those photos?

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Aug 01, 2017 Aug 01, 2017
LATEST

You can view the image in your browser, i.e. using Chrome, right clicking the image I get a menu like

The result shows the URL as in

The url is http://devnet.kentico.com/docs/7_0rc/devguide/devguide_clip1587_zoom70.png

Click the above link and you will see the image.

Edit: Apparently this forum will not allow you to click the link to view the image. Right click the link and open in a new tab.

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines