I have to build a template to send for mail using mjml with jinja2 template. I have inserted an image. After sending the mail the image only shows up in the Gmail web version, mobile version (Gmail app) the image can't load (it display a blue box with a question mark). I got the same problem with outlook. The image was stored in google photoes. I wonder why I have tried , the image inside raw with all attributes image as background-url inside a div but nothing worked for me!! How could I possibly encounter this issue?
<!--chart-->
<mj-section border-left="solid 2px #bebebe" border-right="solid 2px #bebebe">
<mj-column>
<mj-text align="center">
<!--Svg have not worked for me since it is not supported-->
<!-- <mj-raw>
<div class="chart flex col center">
{{data.chart|safe}}
</div>
</mj-raw> -->
<!-- mj-image does not display in mobil-->
<!-- <mj-image align="center" src="{{data.chart}}" /> -->
<!-- background URL also -->
<mj-raw>
<div class="chart flex col center" style="width: 100%; height:350px; display: block; background: url({{data.chart}}); background-size: contain; backgound-repeat:no-repeat; background-position: center;">
</div>
</mj-raw>
<!-- Simple image also-->
<!-- <mj-raw>
<div class="chart flex col center">
<img src={{data.chart}} width="200" alt="report" title="report" height="400px" style="display:block">
</div>
</mj-raw> -->
</mj-text>
</mj-column>
</mj-section>
<!--/chart-->
