0

I'm new to Dreamweaver and I have no idea how to code, but I managed to make an HTML newsletter. But the issue now is, whenever I send it via Gmail, my pictures are shown as alt_text.

image

The images are on the same folder as the newsletter.html file.

What am I doing wrong?

Here's the document and images for download if anyone needs it:

https://drive.google.com/file/d/0B6idya0YoPGnekc5V28tRGljWDQ/view

<!doctype html>
<html>
    <head>
    <meta charset="utf-8">

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

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>EmailTemplate-Responsive</title>


    <style type="text/css">

html,  body {
    margin: 0 !important;
    padding: 0 !important;
    height: 100% !important;
    width: 100% !important;
}
* {
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

.ExternalClass {
    width: 100%;
}

div[style*="margin: 16px 0"] {
    margin: 0 !important;
}

table,  td {
    mso-table-lspace: 0pt !important;
    mso-table-rspace: 0pt !important;
}

table {
    border-spacing: 0 !important;
    border-collapse: collapse !important;
    table-layout: fixed !important;
    margin: 0 auto !important;
}
table table table {
    table-layout: auto;
}

img {
    -ms-interpolation-mode: bicubic;
}

.yshortcuts a {
    border-bottom: none !important;
}

a[x-apple-data-detectors] {
    color: inherit !important;
}
</style>


    <style type="text/css">


        .button-td,
        .button-a {
            transition: all 100ms ease-in;
        }
        .button-td:hover,
        .button-a:hover {
            background: #555555 !important;
            border-color: #555555 !important;
        }


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

            .email-container {
                width: 100% !important;
            }


            .fluid,
            .fluid-centered {
                max-width: 100% !important;
                height: auto !important;
                margin-left: auto !important;
                margin-right: auto !important;
            }

            .fluid-centered {
                margin-left: auto !important;
                margin-right: auto !important;
            }


            .stack-column,
            .stack-column-center {
                display: block !important;
                width: 100% !important;
                max-width: 100% !important;
                direction: ltr !important;
            }
            /* And center justify these ones. */
            .stack-column-center {
                text-align: center !important;
            }


            .center-on-narrow {
                text-align: center !important;
                display: block !important;
                margin-left: auto !important;
                margin-right: auto !important;
                float: none !important;
            }
            table.center-on-narrow {
                display: inline-block !important;
            }

        }

    </style>
    </head>
    <body bgcolor="#e0e0e0" width="100%" style="margin: 0;" yahoo="yahoo">
    <table bgcolor="#e0e0e0" cellpadding="0" cellspacing="0" border="0" height="100%" width="100%" style="border-collapse:collapse;">
      <tr>
        <td><center style="width: 100%;">


            <div style="display:none;font-size:1px;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;mso-hide:all;font-family: sans-serif;"> (Optional) This text will appear in the inbox preview, but not the email body. </div>
            <!-- Visually Hidden Preheader Text : END --> 

            <!-- Email Header : BEGIN -->
            <table align="center" width="600" class="email-container">
            <tr>
                <td style="padding: 20px 0; text-align: center"><a href="http://www.avex.lv/"><img src="Headers.png" width="600" height="150" alt="" border="0"></a></td>
              </tr>
          </table>

            <table cellspacing="0" cellpadding="0" border="0" align="center" bgcolor="#ffffff" width="600" class="email-container">


            <tr> </tr>



            <tr>
                <td background="SJCAM-Logo.png" bgcolor="#222222" valign="middle" style="text-align: center; background-position: center center !important; background-size: cover !important;"><!--[if gte mso 9]>
                    <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:175px; background-position: center center !important;">
                    <v:fill type="tile" src="assets/Responsive/Image_600x230.png" color="#222222" />
                    <v:textbox inset="0,0,0,0">
                    <![endif]-->

                <div>
                    <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
                    <tr>
                        <td valign="middle" style="text-align: center; padding: 40px; font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #ffffff;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</td>
                      </tr>
                  </table>
                  </div>

                <!--[if gte mso 9]>
                    </v:textbox>
                    </v:rect>
                    <![endif]--></td>
              </tr>

            <tr>
                <td align="center" valign="top" style="padding: 10px;"><table cellspacing="0" cellpadding="0" border="0" width="100%">
                    <tr>
                    <td class="stack-column-center"><table cellspacing="0" cellpadding="0" border="0">
                        <tr>
                        <td style="padding: 10px; text-align: center"><a href="http://www.avex.lv/catalogsearch/result/?q=M20"><img src="M20.png" width="270" height="270" alt="alt_text" border="0" class="fluid"></a></td>
                      </tr>
                        <tr>
                        <td style="font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #555555; padding: 0 10px 10px; text-align: left;" class="center-on-narrow">16MP<br>
                          4K@24fps<br>
2K@30fp<br>
1080P@60fps<br>
Sony IMX206 sensor <br>
NTK96660 Novatek CPU <br>
Gyro Anti-shake &amp; WiFi </td>
                      </tr>
                      </table></td>
                    <td class="stack-column-center"><table cellspacing="0" cellpadding="0" border="0">
                        <tr>
                        <td style="padding: 10px; text-align: center"><a href="http://www.avex.lv/catalogsearch/result/?q=Sj6+legend+air"><img src="SJ6LegendAir.png" width="270" height="270" alt="alt_text" border="0" class="fluid"></a></td>
                      </tr>
                        <tr>
                        <td style="font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #555555; padding: 0 10px 10px; text-align: left;" class="center-on-narrow">14MP<br>
                          4K@24fps <br>
                          2K@30fp <br>
                          1080P@60fps <br>
                          Panasonic MN34112PA sensor <br>
SJCAM A9s CPU <br>
Gyro Anti-shake &amp; WiFi<br></td>
                      </tr>
                      </table></td>
                  </tr>
                  </table></td>
              </tr>
              <tr>
                <td align="center" valign="top" style="padding: 10px;"><table cellspacing="0" cellpadding="0" border="0" width="100%">
                    <tr>
                    <td class="stack-column-center"><table cellspacing="0" cellpadding="0" border="0">
                        <tr>
                        <td style="padding: 10px; text-align: center"><a href="http://www.avex.lv/catalogsearch/result/?q=Sj6+legend"><img src="SJ6Legend.png" width="270" height="270" alt="alt_text" border="0" class="fluid"></a></td>
                      </tr>
                        <tr>
                        <td style="font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #555555; padding: 0 10px 10px; text-align: left;" class="center-on-narrow">16MP <br>
                          4K@24fps <br>
                          2K@30fp <br>
                          1080P@60fps <br>
                          Panasonic MN34120PA sensor<br>
                          NTK96660 Novatek CPU <br>
                          Gyro Anti-shake &amp; WiFi</td>
                      </tr>
                      </table></td>
                    <td class="stack-column-center"><table cellspacing="0" cellpadding="0" border="0">
                        <tr>
                        <td style="padding: 10px; text-align: center"><a href="http://www.avex.lv/catalogsearch/result/?q=Sj7+Star"><img src="SJ7Star.png" width="270" height="270" alt="alt_text" border="0" class="fluid"></a></td>
                      </tr>
                        <tr>
                        <td style="font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #555555; padding: 0 10px 10px; text-align: left;" class="center-on-narrow">16MP <br>
                          4K@30fps <br>
                          2K@60/30fp <br>
                          1080P@120/60fps <br>
                          Sony IMX117 sensor<br>
                          Ambarella A12S75 CPU<br>
                          Gyro Anti-shake &amp; WiFi</td>
                      </tr>
                      </table></td>
                  </tr>
                  </table></td>
              </tr>

            <tr>
                <td align="center" valign="top" style="padding: 10px;"><table cellspacing="0" cellpadding="0" border="0" width="100%">
                    <tr>
                    <td width="33.33%" class="stack-column-center"><table cellspacing="0" cellpadding="0" border="0">
                        <tr>
                        <td style="padding: 10px; text-align: center"><a href="http://www.avex.lv/catalogsearch/result/?q=SJBAT"><img src="Battery.png" width="170" height="170" alt="alt_text" border="0" class="fluid"></a></td>
                      </tr>
                        <tr>
                        <td style="font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #555555; padding: 0 10px 10px; text-align: left;" class="center-on-narrow">1000mAh high capacity substitutive Li-ion battery is the best choice for keeping your action camera away from powering off. For SJ6 Legend and S7 Star.<br>
                          <br></td>
                      </tr>
                      </table></td>
                    <td width="33.33%" class="stack-column-center"><table cellspacing="0" cellpadding="0" border="0">
                        <tr>
                        <td style="padding: 10px; text-align: center"><a href="http://www.avex.lv/catalogsearch/result/?q=Dual-Slot"><img src="DualBatteryCharger2.png" width="170" height="170" alt="alt_text" border="0" class="fluid"></a></td>
                      </tr>
                        <tr>
                        <td style="font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #555555; padding: 0 10px 10px; text-align: left;" class="center-on-narrow">2-slot battery charger for SCJAM SJ6 Legend or SJ7 Star.<br>
                          <br>
                          <br>
                          <br>
                          <br>
                          <br></td>
                      </tr>
                      </table></td>
                    <td width="33.33%" class="stack-column-center"><table cellspacing="0" cellpadding="0" border="0">
                        <tr>
                        <td style="padding: 10px; text-align: center"><a href="http://www.avex.lv/sjcam-external-microphone-for-sj6-legend-sj7-star"><img src="EXTERNAL-MIC.png" width="170" height="170" alt="alt_text" border="0" class="fluid"></a></td>
                      </tr>
                        <tr>
                        <td style="font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #555555; padding: 0 10px 10px; text-align: left;" class="center-on-narrow"> External Microphone for SJ6 Legend, SJ7 Star and SJ360<br>
                          <br>
                          <br>
                          <br>
                          <br>
                          <br></td>
                      </tr>
                      </table></td>
                  </tr>
                  </table></td>
              </tr>

            <tr>
                <td dir="ltr" align="center" valign="top" width="100%" style="padding: 10px;"><table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
                    <tr>
                    <td width="33.33%" class="stack-column-center"><table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
                        <tr>
                        <td dir="ltr" valign="top" style="padding: 0 10px;"><a href="http://www.avex.lv/sjcam-smart-remote-wrist-watch-m20-sj6-legend-sj7-star"><img src="RemoteWatch.png"  width="170" alt="alt_text" border="0" class="center-on-narrow"></a></td>
                      </tr>
                      </table></td>
                    <td width="66.66%" class="stack-column-center"><table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
                        <tr>
                        <td dir="ltr" valign="top" style="font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #555555; padding: 10px; text-align: left;" class="center-on-narrow"><font color="#111111"><strong>Smart Remote WristWatch</strong></font><br>
                          <br>
                          Smart Remote Wristwatch, features include: Power, Video-Photo, WiFi on/off, Burst mode, Waterproof up to 3 meters.<br>
                          &nbsp;<br>


                            <table cellspacing="0" cellpadding="0" border="0" class="center-on-narrow" style="float:left;">
                            <tr> </tr>
                          </table>

                         </td>
                      </tr>
                      </table></td>
                  </tr>
                  </table></td>
              </tr>

            <tr>
                <td dir="rtl" align="center" valign="top" width="100%" style="padding: 10px;"><table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
                    <tr>
                    <td width="33.33%" class="stack-column-center"><table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
                        <tr>
                        <td dir="ltr" valign="top" style="padding: 0 10px;"><a href="http://www.avex.lv/sjcam-remote-controller-selfie-stick-m20-sj6-legend-sj7-star"><img src="Selfiestick.png" width="170" alt="alt_text" border="0" class="center-on-narrow"></a></td>
                      </tr>
                      </table></td>
                    <td width="66.66%" class="stack-column-center"><table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
                        <tr>
                        <td dir="ltr" valign="top" style="font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #555555; padding: 10px; text-align: left;" class="center-on-narrow"><font color="#111111"><strong><br>
                          Remote Controller Selfie Stick</strong></font>&nbsp;<br>
                          <br>
                          Smart Remote Controller features include: Power, Video-Photo, WiFi on/off, Burst mode, Waterproof up to 3 meters.<br>
                          Folded Length (mm): 280 ; Extended Length (mm):900<br>
                          <br>


                            <table><br>

                          </table>

                         </td>

                      </tr>
                      </table></td>
                  </tr>
                  </table></td>
              </tr>


          </table>

            <table align="center" width="600" class="email-container">
            <tr>
                <td style="padding: 40px 10px;width: 100%;font-size: 12px; font-family: sans-serif; mso-height-rule: exactly; line-height:18px; text-align: center; color: #888888;"><webversion style="color:#cccccc; text-decoration:underline; font-weight: bold;">View as a Web Page</webversion>
                  <br>
                  <br>
SIA AVEX<br>
Katlakalna iela 9,Rīga<br>
3. Stāvs<br>
<br>
<br><unsubscribe style="color:#888888; text-decoration:underline;">unsubscribe</unsubscribe></td>
              </tr>
          </table>


          </center></td>
      </tr>
    </table>
</body>
</html>
  • 1
    Possible duplicate of [HTML image not showing in Gmail](https://stackoverflow.com/questions/21437916/html-image-not-showing-in-gmail) – Master Yoda Aug 17 '17 at 10:19
  • Can you have a look at the link above to see if it resolves your issue? it sounds like the question is the same. You may find your answer there in which case this question can be closed. – Master Yoda Aug 17 '17 at 10:27
  • Kristofers, would you be able to add the necessary code into the question itself? We like to ensure that questions are viewable and understandable for the long term, and since file lockers work against that - things are frequently deleted - we discourage their use here. A formatting tool is available in the editor. – halfer Aug 17 '17 at 10:44
  • 2
    You need to put all images in a server and change the src of each to a absolute path (h ttp:// yourserver . com/newsletter/your-images) – Roy Bogado Aug 17 '17 at 10:51
  • any server would work? what does it change inside the code? alt_text is one of the lines for one of the pictures, do i replace the img=scr with link from a server? – Kristofers Gulbis Aug 17 '17 at 10:55
  • @halfer all of the code? – Kristofers Gulbis Aug 17 '17 at 10:56
  • @MasterYoda the issue is,i have no idea how coding even works, i tried to manipulate the dreamweaver email template to add another box,and in result it just scattered them all around- i'd be really really happy if someone could explain to me step by step how to edit the issue. – Kristofers Gulbis Aug 17 '17 at 10:58
  • Please add code [into the question, by editing it](https://stackoverflow.com/posts/45732074/edit). In general, readers will want to see the minimum code to be able to reproduce the problem you are experiencing. I would say that if you need to show more than 5Kb worth of code, it needs cutting down to a [smaller example](http://stackoverflow.com/help/mcve), however the question editor will allow ~30Kb before it will reject the question as too large. – halfer Aug 17 '17 at 10:58
  • @halfer https://i.gyazo.com/20c475546e27c766f7c92f3fa876350c.png I used the code toolbar, but it still gave me an error,is there any other way to pase the code inside the question? – Kristofers Gulbis Aug 17 '17 at 11:24
  • Use the preview window to see where your code has not been formatted correctly. It really does work: paste the code into the question, select it using the mouse or shift+cursor keys, and click the `{}` code button. – halfer Aug 17 '17 at 11:26
  • added,is there any server you would suggest to use? – Kristofers Gulbis Aug 17 '17 at 11:46
  • Gmail supports background images, but not background placement. It could be the images are there, but just out of the viewable area. Gmail could be stripping the images. Try hosting your images on a trusted server and link to them with a url. – gwally Aug 17 '17 at 19:19
  • Solved now, works as a charm, thanks alot! :)) – Kristofers Gulbis Aug 18 '17 at 07:10

0 Answers0