Images and background images not rendering on email.

[GustavoCinque]

Hi.

I know it's a topic already discussed on the repo issues, but I'm trying to apply the solutions but nothing is working. So I want to try and ask here.

I'm using a pug file, and the not rendered images are as follows:

div(style="background-image:url('images/bg_wave_1.png');background-position:center top;background-repeat:repeat;background-color:transparent;")

div(style="background-image:url('images/bg_wave_2.png');background-position:top center;background-repeat:repeat;background-color:#d9e2d6;")

img(alt='Facebook' height='32' src='images/facebook2x.png' style='text-decoration: none; -ms-interpolation-mode: bicubic; height: auto; border: 0; display: block;' title='Facebook' width='32')

img(alt='Twitter' height='32' src='images/twitter2x.png' style='text-decoration: none; -ms-interpolation-mode: bicubic; height: auto; border: 0; display: block;' title='Twitter' width='32')

img(alt='Instagram' height='32' src='images/instagram2x.png' style='text-decoration: none; -ms-interpolation-mode: bicubic; height: auto; border: 0; display: block;' title='Instagram' width='32')

img(alt='LinkedIn' height='32' src='images/linkedin2x.png' style='text-decoration: none; -ms-interpolation-mode: bicubic; height: auto; border: 0; display: block;' title='LinkedIn' width='32')

It may be a path error, but I highly doubt it. As soon as I change the image for something incorrect, it shows up not found when it runs (i.e. Not found, skipping: imagesd/facebook2x.png).

My structure is at the moment:

My email is create as:

new Email({
            transport,
            send: true,
            preview: false,
            juice: true,
            juiceSettings: {
                tableElements: ['TABLE']
            },
            juiceResources: {
                preserveImportant: true,
                webResources: {
                    relativeTo: this.getPath(), // this returns "<my local folders>/project/dist/static/mail"
                    images: true
                }
            }
        })

I tried to use the debug flag, but could not get it to work, says it doesn't recognize DEBUG as a internal or external program , etc. Using DEBUG=* node dist/main/server.js.

What am I doing wrong?

[GustavoCinque]

Hi!

Got it to work, but had to use cid on the images and the pug file. So I'll close te issue.

[ShrivatssanNS]

hi @GustavoCinque

how did you fix this issue can you share your code?

[GustavoCinque]

hi @GustavoCinque

how did you fix this issue can you share your code?

Hello! Unfortunaly I don't have the source code anymore, and I'm not working for the same company as before.

[ShrivatssanNS]

@GustavoCinque

Do you remember how to fix?

[ShrivatssanNS]

i need to know where to add cid

[GustavoCinque]

It's probably in the url's path (or src's path, in case of the img tag). If not, there is a few other issues on this github page that has use of cid.

[GustavoCinque]

Or, I added all the images as attachments to the email, gave each of them a cid in-code, and then used "cid:firstImage" on the template.

[ShrivatssanNS]

<img alt="LinkedIn"
                            src="https://cdn.jsdelivr.net/gh/crocodilejs/font-awesome-assets@master/media/rainbow/linkedin-square.svg">

this is my tag where to add?

[GustavoCinque]

Oh, yours is an url... I don't know how then. The ones I used were static images.

[ShrivatssanNS]

ok thanks @GustavoCinque