mjmlio / mjml

MJML: the only framework that makes responsive-email easy
https://mjml.io
MIT License
16.93k stars 953 forks source link

Image path with nested mjml components? #1933

Open connecteev opened 4 years ago

connecteev commented 4 years ago

Thanks for this project, I love MJML...but I'm struggling with this. I am using the MJML app andhave 2 emails in this example: index.mjml, userAccountCreated.mjml In both emails, I want to show header, footer. I want a "sponsor" section to be included from within footer.mjml. The sponsor section should show a local image, sponsor_image.jpg

This is my directory structure:

├── index.mjml
├── userAccountCreated.mjml
├── partials // template partials
|    ├── header.mjml
|    └── footer.mjml
|    └── sponsor.mjml
|    └── sponsor_image.jpg

footer.mjml contains something like this:

    <mj-include path="sponsor.mjml" />

and sponsor.mjml:

    <mj-section background-color="#f3f3f3">
      <mj-column width="50%">
        <mj-image width="270px" src="./sponsor_image.jpg"></mj-image>
      </mj-column>
      <mj-column width="50%">
        <mj-text font-weight="bold" align="justify" font-size="16px" color="#F45E43" font-family="helvetica">SPONSOR</mj-text>
        <mj-text font-size="16px" color="#666666" font-family="Ubuntu" line-height="24px">Are your company processes scattered across a dozen different Google Docs? Well, Trainual solves this problem. You should check them out.</mj-text>
        <mj-button background-color="#F45E43" color="#ffffff"  href="#" border-radius="5px">LEARN MORE</mj-button>
      </mj-column>
    </mj-section>

This works fine (image shows up) if I preview footer.mjml from the partials directory, but not if I preview index.mjml, userAccountCreated.mjml, in which case the image path does not work.

Are absolute image paths supported? What's the right way to do this? I have to make sure that sponsor.mjml is nested inside footer.mjml.

iRyusa commented 4 years ago

Well the relative path will be relative to the output file, so if you compile your index.mjml then it should be ./partials/sponsor_image.jpg

Absolute path should work fines in this case yep. Maybe we could add an option to alter src path to add the partials path to any relative src that shouldn't be that hard to do 🤔

connecteev commented 4 years ago

@iRyusa that would be helpful if the images need to be served locally. As you can see, right now, I can't do that and am forced to host the images externally.