Image path with nested mjml components?

[connecteev]

trafficstars

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]

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]

@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.